受网友指点，要写一篇关于 React 的转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。全局状态管理器的对比文章，从而说明 re未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。act-immut 的优势和不足。为此，【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。我再次调查和研究了相关的状态管理器，并打【本文首发于唐霜的博客】【原创内容，转载请注明出处】算以我厂钟正楷大佬的这篇文章作为蓝本，对我所观察到的不同 rea本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ct 全局状态管理器进行横向对比。本次对【转载请注明来源】【关注微信公众号：wwwtangshuangnet】比的指标主要包含：

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

• 开发体验方面
  • store 配置/model 定义
  未经授权，禁止复制转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
  • 状态使用方式
  【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】
  • 状态修改方式
  【原创不易，请尊重版权】【本文受版权保护】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。
  • 缓存衍生计算
  【本文首发于唐霜的博客】【本文受版权保护】【版权所有，侵权必究】
  • 最小化更新
  转载请注明出处：www.tangshuang.net【作者：唐霜】【原创内容，转载请注明出处】【未经授权禁止转载】
  • 目录结构（索引）
  未经授权，禁止复制转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。
【转载请注明来源】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】
• 运行方面
  • 性能
  【未经授权禁止转载】【转载请注明来源】
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

参与对比的主要包含如下几个：

【本文受版权保护】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

• immutable 典型代表 redux原创内容，盗版必究。【原创不易，请尊重版权】 (react-redux)
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net
• mutable 典型代表 mobx (m著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。obx-react)
【版权所有，侵权必究】【未经授权禁止转载】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。
• 纯 hooks 实现，例如 consta未经授权，禁止复制转载。未经授权，禁止复制转载。te, unstate-next，此次挑著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。选 constate
【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】
• Redux 包装，例如 Dva, rem本文作者：唐霜，转载请注明出处。【本文受版权保护】atch，此次挑选 rematch
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net
• 先定义 model 再以 hooks 消【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。费，例如 overmind, overs著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】tated，此次挑选 overstate【本文受版权保护】【关注微信公众号：wwwtangshuangnet】d
未经授权，禁止复制转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。
• 自家产品 react-immut
原创内容，盗版必究。【作者：唐霜】

下面我们开始进行对比吧。

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

配置/定义方式

简单的说，基本上大部分全局状态管理器都依【未经授权禁止转载】【版权所有，侵权必究】赖一个初始的配置/定义，来明确要管理的状未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net态的初始结构。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

redux

function reducer(state = { name: null }, action) {
  switch(action.type) {
    case 'CHANGE_NAME':
      return { ...state, name: action.data }
  }
}

const store = createStore(reducer)

<Provider store={store}>
  ...
</Provider>

reducer 是一个纯函数，接收前一个转载请注明出处：www.tangshuang.net【转载请注明来源】 state，返回下一个 state。其【未经授权禁止转载】本文作者：唐霜，转载请注明出处。中 reducer 支持 combine转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。 操作来进行分区（分区概念是指将一个庞大【关注微信公众号：wwwtangshuangnet】【转载请注明来源】的 state 按照功能切分不同块来进行【本文受版权保护】著作权归作者所有，禁止商业用途转载。管理）。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

mobx

class Store {
  @observable
  name = null

  @action.bound
  setName(name) {
    this.name = name
  }
}

const store = new Store()

<Provider store={store}>
  ...
</Provider>

单纯从这段代码看，mobx 和 redu未经授权，禁止复制转载。【本文受版权保护】x 的最大不同在于如何定义 store 【本文首发于唐霜的博客】未经授权，禁止复制转载。部分。redux 基于 reducer，【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net而 mobx 基于观察者模式，两者在思想原创内容，盗版必究。原创内容，盗版必究。层面完全是两回事。

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【转载请注明来源】【原创不易，请尊重版权】

constate

function defineStore() {
  const [state, setState] = useState({ name: null })
  const setName = name => setState(state => {
    return { ...state, name }
  })
  return { state, setName }
}

const [Provider, useStore] = constate(defineStore)

<Provider>
  ...
</Provider>

和前面定义 store 的方式不同，而且本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】 constate 本身是没有 stor著作权归作者所有，禁止商业用途转载。【转载请注明来源】e 概念的，只是我为了便于理解，把名字命本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net名为 store 而已。它通过一个 co【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】nstate 函数，生成一个 Provi【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】der 和一个 useStore hoo【转载请注明来源】【原创不易，请尊重版权】k 函数。它完全基于 hooks，没有自【未经授权禁止转载】【版权所有，侵权必究】己的 store。

【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

rematch

Rematch 是在 redux 上面封【未经授权禁止转载】转载请注明出处：www.tangshuang.net装了一层，本质上还是 redux。封装的原创内容，盗版必究。【未经授权禁止转载】一层对于我们而言，最主要是对前文所说的 【本文受版权保护】【本文首发于唐霜的博客】reducer 分区进行了调整，让 ac【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。tion 的功能分开，不需要写在一个函数【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net内部。同时，它增加了 action 的扩【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。展，支持异步操作。

著作权归作者所有，禁止商业用途转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。

const some = {
  state: {
    name: null,
  },
  reducers: {
    setName(state, name) {
      return { ...state, name }
    },
  },
  effects: {
    async updateName(name) { // 默认支持异步
      this.setName(name)
    },
  },
}

const store = init({
  models: { some },
})

<Provider store={store}>
  ...
</Provider>

它的大前提，就是要求开发者在 reduc未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.neter 基础上进行分区，传不同分区给 mo【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】dels 这个参数。另一个好处是，不需要【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】自己去配置，自动默认支持异步操作。但是，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】本质上，和 reducer 那套没有任何【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。区别，而且在代码量上，几乎没有任何优势，【原创内容，转载请注明出处】【本文受版权保护】甚至感觉要写很多重复代码。

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。

overstated

class Some extends Store {
  state = { name: null }
  setName(name) {
    return this.setState(state => {
      return { ...state, name }
    })
  }
}

<Provider>
  ...
</Provider>

和前面所有的实现方案不同 oversta未经授权，禁止复制转载。【未经授权禁止转载】ted 是内部自己保管了一个共享的全局 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netstore。真正在用的时候，需要把上面定原创内容，盗版必究。本文作者：唐霜，转载请注明出处。义好这个 store 传入到 hooks【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】 中使用，例如：

未经授权，禁止复制转载。【原创内容，转载请注明出处】

function MyComponent() {
  const { name, setName } = useStore(Some, store => {
    return { name: store.state.name, setName: store.setName }
  })
  ...
}

后面这个 store 是 Some 的实未经授权，禁止复制转载。【原创内容，转载请注明出处】例对象。用的时候才传入 Some，而非直【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】接提供给 Provider。但是我比较困【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。惑的是，它为啥要提供一个 Provide本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。r 呢？感觉没啥意义啊。

原创内容，盗版必究。【原创内容，转载请注明出处】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

react-immut

const store = createStore({
  name: '',
})

<Provider store={store}>
  ...
</Provider>

用法上保持和 react-redux 一【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。致，仅仅是在定义 store 的时候，只【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。需要传入初始状态就行了，但是为了分区（上【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。面代码写法），传入第二个参数更简单，比 【原创内容，转载请注明出处】【作者：唐霜】rematch 那种省了 10 倍效率。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】不需要写大堆 reducer 代码。

【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

小结

配置/定义	redux(react-redux)	mobx(mobx-react)	constate	rematch	overstated	react-immut
定义方式	reducer function	store class	hooks function	model object	store class	object
支持分区	❌	✅	❌	✅	❓	✅
支持无根 Provider	❌	❌	❌	❌	❌	✅
无 this	✅	❌	✅	❌	❌	✅

overstated 将传入的 Stor著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。e 类或实例作为索引，两个不同的 use著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netStore 但却根据传入的参数，引用相同【未经授权禁止转载】【作者：唐霜】的一个 store。这种方式，我也不知道【版权所有，侵权必究】【作者：唐霜】算不算是一种分区的方式，仁者见仁吧。

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】

状态使用方式

组件通过什么方式才能读取到全局状态？不同【本文首发于唐霜的博客】【未经授权禁止转载】管理器还还是有一点区别。

【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】

Redux & rematch

React-redux 是 redux 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。连接组件的工具，由于 rematch 实【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。际上只是对 redux reducer 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。逻辑的封装，所以也是用 react-re【转载请注明来源】【未经授权禁止转载】dux 来做连接器。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

const mapStateToProps = (state) => {
  return { ...state }
}
export default connect(mapStateToProps)(MyComponent)

完全通过将 state map 到 pr转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ops 的方式，将 state 传入组件原创内容，盗版必究。未经授权，禁止复制转载。后使用。

【本文首发于唐霜的博客】原创内容，盗版必究。【本文受版权保护】

Mobx

@observer
class MyComponent extends React.Component {
  render() {
    const { state } = this.props.store
  }
}

本质上，@observer 和 conn【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ect 功能一致，是组件的包装器，它会自【转载请注明来源】未经授权，禁止复制转载。动注入 store 到 props 上。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。Mobx-react 还可以通过 @in【转载请注明来源】【作者：唐霜】ject 来将 Provider 提供的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】状态属性注入到组件中。@inject 接【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】收的内容和 map 效果一致。

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】未经授权，禁止复制转载。

constate

function MyComponent() {
  const { state } = useStore() // 这个 useStore 是 constate 函数生成的，需要引入
}

useStore 得到的结果完全由 de【作者：唐霜】本文版权归作者所有，未经授权不得转载。fineStore 的返回值决定，感觉非原创内容，盗版必究。【本文受版权保护】常直接。

【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

overstated

function MyComponent() {
  const { name } = useStore(Some, store => {
    return { name: store.state.name }
  })
}

读取到 store 上的什么内容，完全靠【原创不易，请尊重版权】未经授权，禁止复制转载。第二个参数的返回值决定。这里 Some 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】这个 class 一方面是作为实例化出 【原创内容，转载请注明出处】【未经授权禁止转载】store 的依据，另一方面也是取出对应【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】 store 的依据。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

react-immut

function MyComponent() {
  const [state] = useStore()
}

虽然 react-immut 也提供 c本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。onnect 方案，但是使用 hooks著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。 更方便，通过 useStore 直接读转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。取整个 store 的 state 和 未经授权，禁止复制转载。未经授权，禁止复制转载。dispatch。通过传入 keyPat【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】h 可以缩小作用域。

转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

function MyComponent() {
  const [bookName] = useStore('books[0].name')
}

小结

状态读取方式	redux(react-redux)	mobx(mobx-react)	constate	rematch	overstated	react-immut
推荐连接方式	connect	@observe	hooks	–	hooks	hooks
使用时无需 map	❌	✅	✅	–	❌	✅
便捷支持 hooks	✅	❌	✅	–	✅	✅
便捷获取子属性	❌	✅	❌	–	❌	✅

react-redux 提供了 useS【转载请注明来源】本文作者：唐霜，转载请注明出处。elector 这个 hook 函数，不未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】仅可以在里面直接 map state，而未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。且还借鉴了 reslect 的思想实现缓【未经授权禁止转载】【本文首发于唐霜的博客】存。

【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】

状态修改方式

怎么才能修改到全局状态呢？可不可以只修改【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】局部的状态，或者可否快速更新嵌套的属性？【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net经过我观察，更新状态的方式是对我们开发体转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net验最明显的地方。特别是异步操作，不同状态著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。管理器给人的感受可能存在天壤之别。

【转载请注明来源】【本文受版权保护】【转载请注明来源】

Redux

connect 会自动将 dispatc原创内容，盗版必究。【未经授权禁止转载】h 方法加入 props 给组件使用。组【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】件从 props 上读取来自 conne【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ct map 的内容。最常用的异步处理，著作权归作者所有，禁止商业用途转载。【作者：唐霜】是使用中间件 redux-thunk。这本文版权归作者所有，未经授权不得转载。【转载请注明来源】个中间件允许 dispatch 接收一个原创内容，盗版必究。未经授权，禁止复制转载。函数。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

function createAction(type) {
  return (dispatch, getState) => {
    fetch().then((data) => {
      dispatch({ type, data })
    })
  }
}

this.props.dispatch(createAction('UPDATE_NAME'))

这个 createAction 函数被称【本文首发于唐霜的博客】【转载请注明来源】为 action creator，用于生转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net成一个被 dispatch 接收的函数，【转载请注明来源】【本文首发于唐霜的博客】而生成的函数拥有 dispatch 和 【本文首发于唐霜的博客】【原创内容，转载请注明出处】getState 两个参数函数，在该函数著作权归作者所有，禁止商业用途转载。【作者：唐霜】中，可以执行异步操作，并且使用 getS【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。tate 来获取整个 state。

本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【本文首发于唐霜的博客】【原创不易，请尊重版权】

Mobx

在 store 中，修改全局状态极其简单著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，直接修改对应的属性即可，它是 muta原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ble 的。

著作权归作者所有，禁止商业用途转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

class Store {
  @observable
  name = null

  setName(name) {
    this.name = name // 直接修改属性
  }
}

由于可直接修改属性，所以异步操作变得很简【本文受版权保护】本文作者：唐霜，转载请注明出处。单，异步请求完，将新的数据赋值给对应的属【本文首发于唐霜的博客】原创内容，盗版必究。性即可。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。

constate

直接使用创建的 hook 函数返回值进行【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】更新。由于完全基于 hooks，所以异步【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net操作都是走 hooks 的异步方式。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

rematch

const Some = {
  state: { name: null }
  reducers: {
    setName(state, name) {
      return { ...state, name }
    },
  },
  effects: {
    async fetchName() {
      const { name } = await fetch()
      this.setName(name)
    },
  },
}

Rematch 自动加入了 map di【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】spatch 的逻辑：

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

const mapDispatchToProps = (dispatchers) => {
  const { Some } = dispatchers
  const { fetchName } = Some // 把 effects.fetchName 读取出来给 props
  return { fetchName }
}

但总体而言，还是 react-redux【作者：唐霜】未经授权，禁止复制转载。 那一套。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

overstated

由于在 overstated 中需要事先【原创内容，转载请注明出处】未经授权，禁止复制转载。定义 store，而在定义时需要调用 t【转载请注明来源】本文版权归作者所有，未经授权不得转载。his.setState 来更新状态，所【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。以异步操作也自然而言不需要复杂逻辑。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文首发于唐霜的博客】【作者：唐霜】

class Some extends Store {
  state = {
    name: null,
  }

  async fetchName() {
    fetch().(({ name }) => {
      this.setState({ name })
    })
  }
}

react-immut

react-immut 提供了多种 di【本文受版权保护】本文作者：唐霜，转载请注明出处。spatch 的方式，最容易理解的就是通原创内容，盗版必究。未经授权，禁止复制转载。过 key->value 的形式更【本文受版权保护】未经授权，禁止复制转载。新状态。

本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。

dispatch('key', value)

简单直观，但是不适合批量更新。而依赖 i转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】mmer 的能力，批量更新也很方便

【转载请注明来源】【未经授权禁止转载】原创内容，盗版必究。【原创不易，请尊重版权】

dispatch(state => {
  state.name = 'name'
  state.age = 10
  state.books = []
})

由于 react-immut 也提供分区【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net方式载入到 store 中，异步能力也提【版权所有，侵权必究】【版权所有，侵权必究】前考虑了。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net

export const state = {
  name: '',
}

export const updateName = async (dispatch) => () => {
  const data = await fetch()
  dispatch('name', data.name)
}

小结

状态修改方式	redux(react-redux)	mobx(mobx-react)	constate	rematch	overstated	react-immut
基于不可变原则	✅	❌	✅	✅	✅	✅
原子（子属性）更新	❌	✅	❌	❌	❌	✅
便捷嵌套批量更新	❌	✅	❌	❌	❌	✅
便捷 map dispatch	❌	✅	✅	✅	❌	✅
key->value 模式	❌	❌	❌	❌	❌	✅
原生异步支持	❌	✅	❌	✅	✅	✅
无 this	✅	❌	✅	✅	❌	✅

缓存衍生计算

读取 state 时，我们往往需要通过一著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】番计算之后，得到新值，再作为 props【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 传给组件。再 vue 中，我们熟知 c【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】omputed property，同样，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net在 mobx 中，@computed 轻【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net松实现计算缓存，而在 redux 生态中本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，reselect 也可以对计算进行缓存转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，不过开发体验上，就输很多。由于 res著作权归作者所有，禁止商业用途转载。【作者：唐霜】elect 是独立库，所以，也可以用在 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】react-immut 中，不过，实际上未经授权，禁止复制转载。【转载请注明来源】，react 的 memo, useMe未经授权，禁止复制转载。【转载请注明来源】mo 可以替代 reselect 方法。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】

缓存衍生计算	redux(reselect)	mobx(mobx-react)	constate	rematch	overstated	react-immut
支持缓存衍生计算结果	❓	✅	❌	–	❌	❓
计算属性	❌	✅	❌	❌	❌	❌
无 this	✅	❌	✅	✅	❌	✅

最小化渲染

所谓最小化渲染，是指不要 state 有转载请注明出处：www.tangshuang.net【本文受版权保护】一点点变动，都触发所有被 connect本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net/observe 的组件进行更新，应该在【本文受版权保护】【未经授权禁止转载】只有被依赖的 state 节点变化时，才本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。进行更新（依赖收集）。目前能够完全做到这本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】一点的，仅有 mobx 能做到。不过在 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】react-immut 中，也能在无根 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netProvider 模式下，使用 useS【本文受版权保护】【本文受版权保护】tore(keyPath) 部分支持。

【版权所有，侵权必究】【原创内容，转载请注明出处】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

Mobx

class Some {
  @observable
  name = 'tom'

  @observable
  age = 10
}

@inject('store')
@observer
class MyComponent {
  render() {
    const { name } = this.props.store
    // 只用到 name，所以只有在 name 发生变化的时候，才会触发重新渲染
  }
}

react-immut

init({
  name: 'tomy',
})

function MyComponent() {
  const [name] = useStore('name')
  // 在没有使用 Provider 的情况下，只有 name 发生变化，这个组件才会重新渲染
}

小结

最小化渲染	redux(redux-react)	mobx(mobx-react)	constate	rematch	overstated	react-immut
仅指定属性变化时再渲染	❌	✅	❌	❌	❌	✅
无 this	✅	❌	✅	✅	❌	✅

目录结构

我们主要想讨论下，哪个状态管理器能够以更转载请注明出处：www.tangshuang.net【未经授权禁止转载】清晰的目录结构来管理模块状态。

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net

Redux

- App.js
- store.js
- components/some-component/
  - store/
    - index.js
    - reducers.js
    - actions.js
  - some.jsx

Mobx

- App.js
- store.js
- components/some-component/
  - store.class.js
  - some.jsx

constate

- App.js
- components/some-component/
  - store/
    - a.js
    - b.js
  - some.jsx

Rematch

- App.js
- store.js
- components/some-component/
  - model.js
  - some.jsx

overstated

- App.js
- components/some-component/
  - store/
    - a.class.js
    - b.class.js
  - some.jsx

react-immut

- App.js
- components/some-component/
  - store/
    - namespace-a.js
    - namespace-b.js
  - some.jsx

小结

在所有管理器中，redux 是最复杂的。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。mobx, rematch 需要通过一个著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net全局的 store.js 来将所有涉及的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 stores 收拢到一个文件中，这样才著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】能为 Provider 提供 store【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net。而 constate, oversta【版权所有，侵权必究】原创内容，盗版必究。ted, react-immut 无须收著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。拢所有 store，在组件文件夹内定义 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。store 之后，直接引入使用。其中 c本文版权归作者所有，未经授权不得转载。【作者：唐霜】onstate 虽然可以单独为组件提供 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。store，但是要复用它的 store，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。必须导出 Provider，将 Prov转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ider 放在顶层，所以本质上，如果需要【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】根 Provider，还是要收拢所有 s未经授权，禁止复制转载。【作者：唐霜】tore。而 overstated 和 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】react-immut 内置了全局 st【原创内容，转载请注明出处】【版权所有，侵权必究】ore，因此，只要在组件文件夹内自己管理未经授权，禁止复制转载。【未经授权禁止转载】自己相关的 store namespac本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e，就可以完成开发，不需要再到外部进行引本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。入，虽然 overstated 也需要根【转载请注明来源】原创内容，盗版必究。 Provider，但是只要定义一处，内【转载请注明来源】著作权归作者所有，禁止商业用途转载。部不再需要任何操作，而且也不需要给 Pr原创内容，盗版必究。【本文首发于唐霜的博客】ovider 传 store。react【本文受版权保护】本文版权归作者所有，未经授权不得转载。-immut 连 Provider 都不本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net需要，是所有管理器里面最简洁的。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文首发于唐霜的博客】【作者：唐霜】

目录结构	redux(redux-react)	mobx(mobx-react)	constate	rematch	overstated	react-immut
简洁性评分	0	0.5	4	3	5	5
无 this	✅	❌	✅	✅	❌	✅

性能

性能测试非常麻烦，因为不同管理器的编程方本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】式不同，没有办法找到一个可以作为标准的方【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】式衡量。但是为了进行对比，我姑且平衡下面原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】的因素来做对比：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

• 实现相同效果：一个渲染10000行的ta未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netble组件的实现
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】
• 最优化：对所有管理器进行尽可能最高程度的【作者：唐霜】【作者：唐霜】优化，使它们都发挥自己最大的优势
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】

评价指标：

原创内容，盗版必究。未经授权，禁止复制转载。

• 第一次渲染时间
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】未经授权，禁止复制转载。
• 更新2条不连续的记录渲染时间
【作者：唐霜】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

评价方法：

【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

• 编写相同的基础组件，所有管理器都使用这些【原创内容，转载请注明出处】原创内容，盗版必究。组件
【原创不易，请尊重版权】【本文首发于唐霜的博客】
• 通过 chrome performanc本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】e 记录结果
本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。未经授权，禁止复制转载。
• 每个管理器测试 5 次，去除最高最低，取转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net最优值
未经授权，禁止复制转载。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

限制：

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

• 由于条件限制，我只做 redux, mo著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】bx 和 react-immut 的对比
【版权所有，侵权必究】【原创内容，转载请注明出处】

用于对比的代码可以在这里阅读。

本文版权归作者所有，未经授权不得转载。【转载请注明来源】原创内容，盗版必究。

Redux

基于 redux + react-red原创内容，盗版必究。转载请注明出处：www.tangshuang.netux 的架构，在渲染 10000 行数据【转载请注明来源】【版权所有，侵权必究】时，平均耗时 2295ms，更新用时平均著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。 340ms 左右。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】

未经授权，禁止复制转载。原创内容，盗版必究。【本文首发于唐霜的博客】

黄色部分是 script 执行时间，该次【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。截图消耗 1281ms。

【本文首发于唐霜的博客】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

该次截图是更新时消耗，脚本部分用时 28【本文首发于唐霜的博客】【原创不易，请尊重版权】5ms。而真正执行 update 函数（【作者：唐霜】【原创不易，请尊重版权】修改数据）仅 1ms。

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文作者：唐霜，转载请注明出处。

Mobx

基于 mobx + mobx-react【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】 的架构，第一次渲染耗时 1996ms，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。更新用时 430ms 左右。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

【本文受版权保护】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net

该次截图中，黄色脚本执行部分耗时 118未经授权，禁止复制转载。【本文受版权保护】1ms。

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

未经授权，禁止复制转载。【未经授权禁止转载】【未经授权禁止转载】

该次截图更新脚本耗时 374ms。upd【原创不易，请尊重版权】【作者：唐霜】ate 函数消耗 30ms。

本文版权归作者所有，未经授权不得转载。【转载请注明来源】

ReactImmut

基于 react-immut 来实现，第【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net一次渲染耗时 1850ms，更新用时 3【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】88ms。

【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】

本次截图脚本耗时 1049ms。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

本次截图脚本用时 325ms，真正的 u【未经授权禁止转载】本文作者：唐霜，转载请注明出处。pdate 函数耗时 6ms。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

小结

在首次渲染 1000 行数据的整体耗时上转载请注明出处：www.tangshuang.net【本文受版权保护】，三个状态管理器并没有太大的差别，都是在著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】一个量级，而且 layout 部分消耗时【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】间也很多。真正的差别在更新阶段，单纯看 未经授权，禁止复制转载。【原创内容，转载请注明出处】update 函数，也就是执行数据修改，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】得到新数据这个过程，redux 系虽然需本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net要写更复杂的对象解构代码，却是最快的，仅本文版权归作者所有，未经授权不得转载。【转载请注明来源】用了 1ms，因为只产生新对象，而不会对【本文受版权保护】【作者：唐霜】原有对象进行修改。mobx 消耗 30m【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】s，差距比较大，因为 mobx 基于 o【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。bservable 实现，内部需要处理复【关注微信公众号：wwwtangshuangnet】【本文受版权保护】杂的关系。而 react-immut 基【原创内容，转载请注明出处】【原创不易，请尊重版权】于 immer 实现，而 immer 基原创内容，盗版必究。原创内容，盗版必究。于 Proxy 实现，理论上应该比 mo转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】bx 基于 Object.defineP【版权所有，侵权必究】【版权所有，侵权必究】roperty 实现更消耗性能，但由于在【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net嵌套对象拦截时处理的更好，所以，反而比 【作者：唐霜】【本文首发于唐霜的博客】mobx 更快。在整体更新性能上，由于实【作者：唐霜】【原创不易，请尊重版权】际上还是把整个 1000 行数据重新遍历转载请注明出处：www.tangshuang.net原创内容，盗版必究。一边，所以也没有突出的性能差别。

【作者：唐霜】【原创不易，请尊重版权】

最终结论

本文主要从开发体验的角度，对比了 red【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netux(react-redux)、mobx【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】(mobx-react)、constat【原创不易，请尊重版权】【本文首发于唐霜的博客】e、rematch、overstated【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】、react-immut 在各个方面的开著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】发体验，最后由于条件所限，只对比了 re原创内容，盗版必究。【作者：唐霜】dux(react-redux)、mob【未经授权禁止转载】转载请注明出处：www.tangshuang.netx(mobx-react)、react-本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】immut 的部分性能，性能对比不算严格著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，但能大致了解它们之间的差别。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

做这个对比，主要还是想和读者探讨 rea未经授权，禁止复制转载。【原创不易，请尊重版权】ct 全局状态管理器的一些特质。在我撰写本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net react-immut 的过程中，我最【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。初只提供了非常单一的能力，代码只有 15转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。0 行，但是随着自己对某些场景和能力的认本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】知，最终代码也到达了 250 行。你可以【版权所有】唐霜 www.tangshuang.net【本文受版权保护】在这里阅读它的源码，如果有你自己的想法，也不妨【作者：唐霜】转载请注明出处：www.tangshuang.net在本文下方给我留言，一起探讨。

【本文首发于唐霜的博客】原创内容，盗版必究。

2020-09-13 9834