前端常见库的理解

# 常见库的理解

简单记录一下常见库的个人理解，把这些库放在一起对比后可以比较方便的知道各个库的不同，以及凸显 @kaokei/use-vue-service 的差异点和必要性。

可以从这几个方面来分析库的不同点。

如何定义服务
如何组织/组合/管理/注册服务
如何获取服务
数据如何驱动模板

这里的服务的定义是：特定领域相关数据和方法的集合。

# 定义服务的方式

class

// 定义服务
class Counter {
  count: 0;
}

const counter1 = new Counter(); // 获取服务实例
const counter2 = new Counter(); // 获取服务实例

1
2
3
4
5
6
7

function

// 定义服务
function getCounter() {
  return {
    count: 0
  }
}

const counter1 = getCounter(); // 获取服务实例
const counter2 = getCounter(); // 获取服务实例

1
2
3
4
5
6
7
8
9

对象字面量

const Counter = {
  count: 0
}

1
2
3

注意这里第 3 种方式是单例模式，如果想要多个实例，只能使用 deepClone 来复制数据了。实际上没有哪个库是采用这种方式。

这里只是想明确一下服务声明和服务本身是两个不同的概念。服务定义可以有多种不同的形式，但是服务本身就是一个普通 js 对象。

# redux 以及 react-redux

(opens new window) (opens new window)

redux 本身的概念比较简单，而且是和具体 UI 框架无关的。所以必须要配合 react-redux 一起使用才能更好的在 react 中使用。

// 观察redux的主要API调用
const rootReducer = combineReducers({subReducer1, subReducer2});
const store = createStore(rootReducer);
store.subscribe(() => console.log(store.getState()));
store.dispatch({type: 'someType'});

1
2
3
4
5

第一点需要弄明白的就是 reducer 的定义。reducer 本身是一个纯函数，是和 redux 无关的。

但是函数签名必须满足：(previousState = initialState, action) => newState，其实这也是和类所表达的服务是一个东西，是数据和方法的封装。

其中 state 部分就是数据，但是要注意这里的 state 部分，虽然说 reducer 是一个纯函数，但其实并不够纯，因为 initalState 必然属于闭包中的一个变量值。

而 action 部分就是方法。只不过这里的 action 部分使用的是 type 字段，类型是字符串而已。

再看 combineReducers 只是组合服务的一种方式而已。

然后再通过 createStore 创建一个全局 store，通过 store 来管理这些服务，最重要的一种管理方式就是只能通过 store.dispatch 来修改数据。

又因为 store 是全局的，我们可以通过单例模式，import 到需要的模块中，就达到获取服务的目的了。

而 store.subscribe 则是实现数据驱动模板更新的最底层的机制。

如果不使用 react-redux，可以参考这个简单的例子 (opens new window)。

这个例子中可以明显看出来如何通过 store.subscribe 来实现数据变化进而驱动模板更新。但是这样操作的性能太低了。

再来看看 react-redux，它是基于 redux 的连接 react 和 redux 的库，基本特性和 redux 一致，主要是解决了 store 中数据变化时，模版也会自动更新。

主要 api 是 connect 和 Provider。

Provider 通过 context 提供了全局的 store，是为了 conenct 服务的。在 connect 中可以随时通过 context 获取到 store。从而读取数据。

connect 本身是是一个函数，该函数返回值是一个高阶组件。注意高阶组件是一个函数，而不是组件。这个高阶组件函数可以包裹我们自己的组件，返回一个新组件。

该高阶组件可以通过闭包拿到 connect 提供的 mapStateToProps 和 mapDispatchToProps，通过这两个函数再加上 context 中的 store，就可以获取到相应数据和方法了。

其中数据部分是：store+mapStateToProps=>newState，其中方法部分是：store.dispatch+mapDispatchToProps=>newActions。

目前为止还只能解决组件第一次渲染的时候获取数据的问题，关键还是要解决数据变化的时候，组件如何响应更新。

实际上还是需要依赖 store.subscribe 这个 api，会在组件 mounted 时注册一个监听器，卸载组件时取消监听器。

该监听器每次会重新从 store 获取数据，并和缓存中的数据做对比，如果数据有变化，那么执行 setState 操作，从而更新组件。

redux 的缺点是模版代码很多，而且在 reducer 中已经定义了数据和方法了，在 connect 中还是需要再次定义数据和方法。再加上 action、actionCreator 等等。

使用 reduce 表达服务，使用闭包中的 initialState 作为服务的初始值使用 combineReducers 来组合服务使用 createStore 来管理服务使用 Provider 提供全局的 store，组件使用 connect 来订阅 store 中的数据和方法组件通过 store.dispatch 来修改数据，当 store 中数据变化时，因为 connect 订阅了 store，所以会接收到 store.subscribe 的通知，从而可以更新组件

# 对比 vuex 和 redux 的区别 todo

mutable 和 immutable 自顶向下直接触达

# mobx 和 mobx-react

(opens new window) (opens new window) (opens new window)

mobx 和 vue 非常像，可以说大部分能力 vue 已经天生支持了，剩下的就是如何组织代码的区别而已。

mobx 使用步骤

定义可观察数据，可以是对象或者类。这里依赖 mobx 的 observable 这个 API。
定义组件。这里依赖 mobx-react 的 observer 这个 API。
通过依赖注入 store 到组件，依赖 mobx-react 的 Provider 和 inject 两个 API
然后我们只要改变了数据，组件就会自动更新。

再对比 vue3 中的实现，第 1 步其实就是 reactive 这个 api，第 2 步中 vue 组件默认就是会观察 reactive 数据的，所以也不需要 observer 这个 API。至于第 3 步确实还没有比较好的复用数据的方式。这也就是 @kaokei/use-vue-service 主要做的事情。

参考这个demo (opens new window)，分析如下：

采用类来定义服务，但是需要具体声明各个属性和方法的性质，比如@observable @computed @action
然后导出一个类的实例，这里就能看出来至少在这个项目中服务都是单例的，如果需要多例，就需要自己手动 new 多个实例。
然后在根组件使用 Provider，这个 Provider 比较特殊，可以注入任意个值。
然后在组件中就可以@inject('articlesStore')类似这样注入服务，然后就可以通过 this.props 获取到特定 store 数据。
因为定义组件时，会将组件当作参数传递给 observer 函数，所以当数据有变化时，observer 函数就会更新组件。

再参考这个demo (opens new window)

这里没有使用 Provider，而是通过 props 从根组件一层层传递服务，这也是一种方式，但是就略显麻烦，但是证明了只要能获取到 store，就可以使用该 store 的数据和方法。而且能看出来，相比于 redux 和 react-redux，mobx 和 mobx-react 结合的更加紧密，完全不能独立分开使用。

前端常见库的理解

# 常见库的理解

# 定义服务的方式

# redux 以及 react-redux

# 对比 vuex 和 redux 的区别 todo

# mobx 和 mobx-react

# mobx-state-tree

# redux-thunk

# redux-saga

# redux-observable

# dva

# rematch

# composition-api

# rxjs

# vue-rx

# Recoil todo

# immer

# concent

# dob

# xreact

# stamen

# redux-arena

# 各个库的特性总结

# vue 和 react 的数据驱动的区别

# 其他参考文章