React 全局状态管理器 redux, mobx, react-immut 等横向对比-唐霜

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

开发体验方面本文作者：唐霜，转载请注明出处。
- store 配置/model 定义【版权所有】唐霜 www.tangshuang.net
- 状态使用方式原创内容，盗版必究。
- 状态修改方式著作权归作者所有，禁止商业用途转载。
- 缓存衍生计算本文版权归作者所有，未经授权不得转载。
- 最小化更新未经授权，禁止复制转载。
- 目录结构（索引）著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

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

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

运行方面【版权所有】唐霜 www.tangshuang.net
- 性能【本文首发于唐霜的博客】

本文作者：唐霜，转载请注明出处。

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

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

参与对比的主要包含如下几个：未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【作者：唐霜】

immutable 典型代表 redux【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 (react-redux)

【未经授权禁止转载】

【本文首发于唐霜的博客】

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

mutable 典型代表 mobx (m原创内容，盗版必究。【原创不易，请尊重版权】obx-react)

著作权归作者所有，禁止商业用途转载。

【本文受版权保护】

【未经授权禁止转载】

原创内容，盗版必究。

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

纯 hooks 实现，例如 consta【关注微信公众号：wwwtangshuangnet】【本文受版权保护】te, unstate-next，此次挑本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】选 constate

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

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

Redux 包装，例如 Dva, rem【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。atch，此次挑选 rematch

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

原创内容，盗版必究。

先定义 model 再以 hooks 消本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。费，例如 overmind, overs本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。tated，此次挑选 overstate【本文受版权保护】【转载请注明来源】d

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

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

自家产品 react-immut转载请注明出处：www.tangshuang.net

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

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

下面我们开始进行对比吧。【原创内容，转载请注明出处】

配置/定义方式【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。未经授权，禁止复制转载。

未经授权，禁止复制转载。【原创不易，请尊重版权】转载请注明出处：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 是一个纯函数，接收前一个【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 state，返回下一个 state。其【本文受版权保护】本文作者：唐霜，转载请注明出处。中 reducer 支持 combine【转载请注明来源】【原创内容，转载请注明出处】操作来进行分区（分区概念是指将一个庞大【本文首发于唐霜的博客】【未经授权禁止转载】的 state 按照功能切分不同块来进行转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】管理）。

【访问 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转载请注明出处：www.tangshuang.net【版权所有，侵权必究】x 的最大不同在于如何定义 store 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】部分。redux 基于 reducer，【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。而 mobx 基于观察者模式，两者在思想著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】层面完全是两回事。

constate【关注微信公众号：wwwtangshuangnet】

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 的方式不同，而且【版权所有，侵权必究】【本文首发于唐霜的博客】 constate 本身是没有 stor未经授权，禁止复制转载。原创内容，盗版必究。e 概念的，只是我为了便于理解，把名字命【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】名为 store 而已。它通过一个 co【版权所有，侵权必究】原创内容，盗版必究。nstate 函数，生成一个 Provi【作者：唐霜】著作权归作者所有，禁止商业用途转载。der 和一个 useStore hoo著作权归作者所有，禁止商业用途转载。【转载请注明来源】k 函数。它完全基于 hooks，没有自【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】己的 store。

rematch【原创不易，请尊重版权】

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

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

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【本文受版权保护】【版权所有，侵权必究】er 基础上进行分区，传不同分区给 mo【未经授权禁止转载】【作者：唐霜】dels 这个参数。另一个好处是，不需要【转载请注明来源】原创内容，盗版必究。自己去配置，自动默认支持异步操作。但是，转载请注明出处：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 是内部自己保管了一个共享的全局未经授权，禁止复制转载。原创内容，盗版必究。store。真正在用的时候，需要把上面定【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net义好这个 store 传入到 hooks【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】中使用，例如：

【未经授权禁止转载】【作者：唐霜】【作者：唐霜】本文作者：唐霜，转载请注明出处。

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

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

react-immut著作权归作者所有，禁止商业用途转载。

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

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

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

小结【原创内容，转载请注明出处】

配置/定义【访问 www.tangshuang.net 获取更多精彩内容】	redux(react-redux)【关注微信公众号：wwwtangshuangnet】	mobx(mobx-react)本文版权归作者所有，未经授权不得转载。	constate【转载请注明来源】	rematch本文作者：唐霜，转载请注明出处。	overstated转载请注明出处：www.tangshuang.net	react-immut【本文受版权保护】
定义方式未经授权，禁止复制转载。	reducer function原创内容，盗版必究。	store class未经授权，禁止复制转载。	hooks function本文版权归作者所有，未经授权不得转载。	model object原创内容，盗版必究。	store class原创内容，盗版必究。	object著作权归作者所有，禁止商业用途转载。
支持分区转载请注明出处：www.tangshuang.net	❌著作权归作者所有，禁止商业用途转载。	✅【原创内容，转载请注明出处】	❌转载请注明出处：www.tangshuang.net	✅【本文受版权保护】	❓转载请注明出处：www.tangshuang.net	✅原创内容，盗版必究。
支持无根 Provider【版权所有】唐霜 www.tangshuang.net	❌未经授权，禁止复制转载。	❌未经授权，禁止复制转载。	❌原创内容，盗版必究。	❌本文作者：唐霜，转载请注明出处。	❌本文版权归作者所有，未经授权不得转载。	✅本文作者：唐霜，转载请注明出处。
无 this转载请注明出处：www.tangshuang.net	✅未经授权，禁止复制转载。	❌【本文受版权保护】	✅【转载请注明来源】	❌本文版权归作者所有，未经授权不得转载。	❌转载请注明出处：www.tangshuang.net	✅【本文受版权保护】

overstated 将传入的 Stor未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nete 类或实例作为索引，两个不同的 use转载请注明出处：www.tangshuang.net【转载请注明来源】Store 但却根据传入的参数，引用相同【转载请注明来源】【转载请注明来源】的一个 store。这种方式，我也不知道【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。算不算是一种分区的方式，仁者见仁吧。

原创内容，盗版必究。【转载请注明来源】【原创内容，转载请注明出处】

状态使用方式未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

组件通过什么方式才能读取到全局状态？不同【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】管理器还还是有一点区别。

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

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

【作者：唐霜】【本文受版权保护】【作者：唐霜】

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

本文作者：唐霜，转载请注明出处。【本文受版权保护】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

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

完全通过将 state map 到 pr【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ops 的方式，将 state 传入组件本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】后使用。

【本文受版权保护】【未经授权禁止转载】【未经授权禁止转载】

Mobx【关注微信公众号：wwwtangshuangnet】

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

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

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

constate【版权所有】唐霜 www.tangshuang.net

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】【未经授权禁止转载】

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

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

overstated【版权所有】唐霜 www.tangshuang.net

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

读取到 store 上的什么内容，完全靠未经授权，禁止复制转载。【原创不易，请尊重版权】第二个参数的返回值决定。这里 Some 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。这个 class 一方面是作为实例化出原创内容，盗版必究。本文作者：唐霜，转载请注明出处。store 的依据，另一方面也是取出对应本文版权归作者所有，未经授权不得转载。【本文受版权保护】 store 的依据。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】未经授权，禁止复制转载。

react-immut著作权归作者所有，禁止商业用途转载。

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

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

【作者：唐霜】原创内容，盗版必究。【转载请注明来源】未经授权，禁止复制转载。

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

小结【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】未经授权，禁止复制转载。

状态读取方式转载请注明出处：www.tangshuang.net	redux(react-redux)【作者：唐霜】	mobx(mobx-react)本文作者：唐霜，转载请注明出处。	constate本文作者：唐霜，转载请注明出处。	rematch【访问 www.tangshuang.net 获取更多精彩内容】	overstated著作权归作者所有，禁止商业用途转载。	react-immut【访问 www.tangshuang.net 获取更多精彩内容】
推荐连接方式未经授权，禁止复制转载。	connect【转载请注明来源】	@observe【版权所有】唐霜 www.tangshuang.net	hooks【关注微信公众号：wwwtangshuangnet】	–未经授权，禁止复制转载。	hooks本文作者：唐霜，转载请注明出处。	hooks【转载请注明来源】
使用时无需 map【版权所有】唐霜 www.tangshuang.net	❌【版权所有】唐霜 www.tangshuang.net	✅未经授权，禁止复制转载。	✅未经授权，禁止复制转载。	–【原创不易，请尊重版权】	❌著作权归作者所有，禁止商业用途转载。	✅【转载请注明来源】
便捷支持 hooks【本文受版权保护】	✅【本文首发于唐霜的博客】	❌本文版权归作者所有，未经授权不得转载。	✅【转载请注明来源】	–本文版权归作者所有，未经授权不得转载。	✅【访问 www.tangshuang.net 获取更多精彩内容】	✅【访问 www.tangshuang.net 获取更多精彩内容】
便捷获取子属性【关注微信公众号：wwwtangshuangnet】	❌【版权所有，侵权必究】	✅本文版权归作者所有，未经授权不得转载。	❌【关注微信公众号：wwwtangshuangnet】	–【版权所有，侵权必究】	❌【作者：唐霜】	✅本文作者：唐霜，转载请注明出处。

react-redux 提供了 useS【版权所有，侵权必究】【作者：唐霜】elector 这个 hook 函数，不转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。仅可以在里面直接 map state，而【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。且还借鉴了 reslect 的思想实现缓本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。存。

状态修改方式本文版权归作者所有，未经授权不得转载。

怎么才能修改到全局状态呢？可不可以只修改【转载请注明来源】未经授权，禁止复制转载。局部的状态，或者可否快速更新嵌套的属性？【转载请注明来源】【作者：唐霜】经过我观察，更新状态的方式是对我们开发体【转载请注明来源】【未经授权禁止转载】验最明显的地方。特别是异步操作，不同状态原创内容，盗版必究。未经授权，禁止复制转载。管理器给人的感受可能存在天壤之别。

原创内容，盗版必究。原创内容，盗版必究。【作者：唐霜】本文作者：唐霜，转载请注明出处。【转载请注明来源】

Redux原创内容，盗版必究。

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

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

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

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

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

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

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

Mobx本文作者：唐霜，转载请注明出处。

在 store 中，修改全局状态极其简单原创内容，盗版必究。未经授权，禁止复制转载。，直接修改对应的属性即可，它是 muta原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ble 的。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

class Store {
  @observable
  name = null

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

由于可直接修改属性，所以异步操作变得很简【原创内容，转载请注明出处】【转载请注明来源】单，异步请求完，将新的数据赋值给对应的属未经授权，禁止复制转载。【本文受版权保护】性即可。

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

constate原创内容，盗版必究。

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

直接使用创建的 hook 函数返回值进行原创内容，盗版必究。未经授权，禁止复制转载。更新。由于完全基于 hooks，所以异步未经授权，禁止复制转载。【本文受版权保护】操作都是走 hooks 的异步方式。

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

rematch【版权所有，侵权必究】

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

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.netspatch 的逻辑：

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

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

但总体而言，还是 react-redux【作者：唐霜】【本文受版权保护】那一套。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】

overstated原创内容，盗版必究。

未经授权，禁止复制转载。【原创内容，转载请注明出处】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

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

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

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

react-immut原创内容，盗版必究。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】

dispatch('key', value)

简单直观，但是不适合批量更新。而依赖 i【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。mmer 的能力，批量更新也很方便

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

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

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【关注微信公众号：wwwtangshuangnet】
基于不可变原则【未经授权禁止转载】	✅未经授权，禁止复制转载。	❌本文版权归作者所有，未经授权不得转载。	✅本文作者：唐霜，转载请注明出处。	✅原创内容，盗版必究。	✅本文版权归作者所有，未经授权不得转载。	✅【关注微信公众号：wwwtangshuangnet】
原子（子属性）更新未经授权，禁止复制转载。	❌本文版权归作者所有，未经授权不得转载。	✅【本文受版权保护】	❌本文版权归作者所有，未经授权不得转载。	❌【版权所有】唐霜 www.tangshuang.net	❌本文作者：唐霜，转载请注明出处。	✅【关注微信公众号：wwwtangshuangnet】
便捷嵌套批量更新【关注微信公众号：wwwtangshuangnet】	❌【访问 www.tangshuang.net 获取更多精彩内容】	✅未经授权，禁止复制转载。	❌【转载请注明来源】	❌转载请注明出处：www.tangshuang.net	❌【版权所有，侵权必究】	✅本文版权归作者所有，未经授权不得转载。
便捷 map dispatch本文版权归作者所有，未经授权不得转载。	❌【本文受版权保护】	✅【关注微信公众号：wwwtangshuangnet】	✅本文版权归作者所有，未经授权不得转载。	✅著作权归作者所有，禁止商业用途转载。	❌著作权归作者所有，禁止商业用途转载。	✅【版权所有，侵权必究】
key->value 模式本文作者：唐霜，转载请注明出处。	❌本文作者：唐霜，转载请注明出处。	❌【本文首发于唐霜的博客】	❌【版权所有】唐霜 www.tangshuang.net	❌原创内容，盗版必究。	❌【原创内容，转载请注明出处】	✅【版权所有】唐霜 www.tangshuang.net
原生异步支持【本文受版权保护】	❌本文版权归作者所有，未经授权不得转载。	✅【转载请注明来源】	❌本文版权归作者所有，未经授权不得转载。	✅【关注微信公众号：wwwtangshuangnet】	✅本文版权归作者所有，未经授权不得转载。	✅未经授权，禁止复制转载。
无 this本文版权归作者所有，未经授权不得转载。	✅本文作者：唐霜，转载请注明出处。	❌【本文受版权保护】	✅【未经授权禁止转载】	✅著作权归作者所有，禁止商业用途转载。	❌【版权所有】唐霜 www.tangshuang.net	✅原创内容，盗版必究。

缓存衍生计算【未经授权禁止转载】

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

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】未经授权，禁止复制转载。【原创不易，请尊重版权】

缓存衍生计算原创内容，盗版必究。	redux(reselect)本文作者：唐霜，转载请注明出处。	mobx(mobx-react)转载请注明出处：www.tangshuang.net	constate【本文受版权保护】	rematch本文版权归作者所有，未经授权不得转载。	overstated原创内容，盗版必究。	react-immut【访问 www.tangshuang.net 获取更多精彩内容】
支持缓存衍生计算结果原创内容，盗版必究。	❓原创内容，盗版必究。	✅著作权归作者所有，禁止商业用途转载。	❌【版权所有，侵权必究】	–【关注微信公众号：wwwtangshuangnet】	❌【未经授权禁止转载】	❓【访问 www.tangshuang.net 获取更多精彩内容】
计算属性【关注微信公众号：wwwtangshuangnet】	❌原创内容，盗版必究。	✅未经授权，禁止复制转载。	❌【本文受版权保护】	❌【关注微信公众号：wwwtangshuangnet】	❌【版权所有，侵权必究】	❌【访问 www.tangshuang.net 获取更多精彩内容】
无 this【作者：唐霜】	✅本文版权归作者所有，未经授权不得转载。	❌原创内容，盗版必究。	✅本文版权归作者所有，未经授权不得转载。	✅著作权归作者所有，禁止商业用途转载。	❌【转载请注明来源】	✅【版权所有】唐霜 www.tangshuang.net

最小化渲染本文作者：唐霜，转载请注明出处。

【原创内容，转载请注明出处】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

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

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

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 发生变化，这个组件才会重新渲染
}

小结【关注微信公众号：wwwtangshuangnet】

最小化渲染【原创内容，转载请注明出处】	redux(redux-react)【转载请注明来源】	mobx(mobx-react)【访问 www.tangshuang.net 获取更多精彩内容】	constate转载请注明出处：www.tangshuang.net	rematch【未经授权禁止转载】	overstated【未经授权禁止转载】	react-immut【未经授权禁止转载】
仅指定属性变化时再渲染【原创不易，请尊重版权】	❌【原创不易，请尊重版权】	✅未经授权，禁止复制转载。	❌【作者：唐霜】	❌原创内容，盗版必究。	❌【作者：唐霜】	✅本文作者：唐霜，转载请注明出处。
无 this【版权所有】唐霜 www.tangshuang.net	✅【转载请注明来源】	❌转载请注明出处：www.tangshuang.net	✅【转载请注明来源】	✅【转载请注明来源】	❌【未经授权禁止转载】	✅【原创内容，转载请注明出处】

目录结构本文作者：唐霜，转载请注明出处。

我们主要想讨论下，哪个状态管理器能够以更【转载请注明来源】【作者：唐霜】清晰的目录结构来管理模块状态。

Redux原创内容，盗版必究。

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

Mobx【本文首发于唐霜的博客】

【转载请注明来源】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

- 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

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

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

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

目录结构著作权归作者所有，禁止商业用途转载。	redux(redux-react)原创内容，盗版必究。	mobx(mobx-react)本文版权归作者所有，未经授权不得转载。	constate【原创内容，转载请注明出处】	rematch本文版权归作者所有，未经授权不得转载。	overstated【原创内容，转载请注明出处】	react-immut未经授权，禁止复制转载。
简洁性评分转载请注明出处：www.tangshuang.net	0本文版权归作者所有，未经授权不得转载。	0.5【版权所有，侵权必究】	4【本文首发于唐霜的博客】	3【原创内容，转载请注明出处】	5本文作者：唐霜，转载请注明出处。	5【版权所有】唐霜 www.tangshuang.net
无 this【作者：唐霜】	✅【转载请注明来源】	❌未经授权，禁止复制转载。	✅未经授权，禁止复制转载。	✅未经授权，禁止复制转载。	❌【作者：唐霜】	✅本文作者：唐霜，转载请注明出处。

性能【关注微信公众号：wwwtangshuangnet】

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

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

实现相同效果：一个渲染10000行的ta【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ble组件的实现

【原创内容，转载请注明出处】

著作权归作者所有，禁止商业用途转载。

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

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

评价指标：转载请注明出处：www.tangshuang.net

【原创内容，转载请注明出处】【作者：唐霜】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】

第一次渲染时间【访问 www.tangshuang.net 获取更多精彩内容】

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

【访问 www.tangshuang.net 获取更多精彩内容】

更新2条不连续的记录渲染时间【本文首发于唐霜的博客】

【作者：唐霜】

著作权归作者所有，禁止商业用途转载。

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

评价方法：【本文首发于唐霜的博客】

【原创不易，请尊重版权】

【转载请注明来源】

【作者：唐霜】

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

原创内容，盗版必究。

通过 chrome performanc著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】e 记录结果

【本文首发于唐霜的博客】

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

由于条件限制，我只做 redux, mo【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】bx 和 react-immut 的对比

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

【作者：唐霜】

用于对比的代码可以在本文版权归作者所有，未经授权不得转载。这里原创内容，盗版必究。阅读。【未经授权禁止转载】

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

Redux原创内容，盗版必究。

未经授权，禁止复制转载。未经授权，禁止复制转载。【未经授权禁止转载】【本文首发于唐霜的博客】【本文受版权保护】

基于 redux + react-red著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ux 的架构，在渲染 10000 行数据【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】时，平均耗时 2295ms，更新用时平均原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 340ms 左右。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【未经授权禁止转载】

该次截图是更新时消耗，脚本部分用时 28未经授权，禁止复制转载。未经授权，禁止复制转载。5ms。而真正执行 update 函数（【原创内容，转载请注明出处】【原创内容，转载请注明出处】修改数据）仅 1ms。

Mobx著作权归作者所有，禁止商业用途转载。

基于 mobx + mobx-react未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的架构，第一次渲染耗时 1996ms，【转载请注明来源】原创内容，盗版必究。更新用时 430ms 左右。

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

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

该次截图中，黄色脚本执行部分耗时 118【本文受版权保护】转载请注明出处：www.tangshuang.net1ms。

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

本文版权归作者所有，未经授权不得转载。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

该次截图更新脚本耗时 374ms。upd本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ate 函数消耗 30ms。

ReactImmut著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】【转载请注明来源】原创内容，盗版必究。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

本次截图脚本耗时 1049ms。未经授权，禁止复制转载。

本次截图脚本用时 325ms，真正的 u著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】pdate 函数耗时 6ms。

小结原创内容，盗版必究。

转载请注明出处：www.tangshuang.net【转载请注明来源】原创内容，盗版必究。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

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

最终结论【未经授权禁止转载】

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

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【本文受版权保护】

做这个对比，主要还是想和读者探讨 rea【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ct 全局状态管理器的一些特质。在我撰写本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 react-immut 的过程中，我最本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net初只提供了非常单一的能力，代码只有 15【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。0 行，但是随着自己对某些场景和能力的认本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。知，最终代码也到达了 250 行。你可以转载请注明出处：www.tangshuang.net【转载请注明来源】在这里【版权所有，侵权必究】阅读它的源码，如果有你自己的想法，也不妨著作权归作者所有，禁止商业用途转载。【转载请注明来源】在本文下方给我留言，一起探讨。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】转载请注明出处：www.tangshuang.net【转载请注明来源】【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文受版权保护】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【本文受版权保护】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【原创内容，转载请注明出处】原创内容，盗版必究。【版权所有，侵权必究】

2020-09-13 9108

唐霜

React 全局状态管理器 redux, mobx, react-immut 等横向对比

配置/定义方式【原创内容，转载请注明出处】

redux原创内容，盗版必究。

mobx著作权归作者所有，禁止商业用途转载。

constate【关注微信公众号：wwwtangshuangnet】

rematch【原创不易，请尊重版权】

overstated【原创不易，请尊重版权】

react-immut著作权归作者所有，禁止商业用途转载。

小结【原创内容，转载请注明出处】

状态使用方式未经授权，禁止复制转载。

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

Mobx【关注微信公众号：wwwtangshuangnet】

constate【版权所有】唐霜 www.tangshuang.net

overstated【版权所有】唐霜 www.tangshuang.net

react-immut著作权归作者所有，禁止商业用途转载。

小结【关注微信公众号：wwwtangshuangnet】

状态修改方式本文版权归作者所有，未经授权不得转载。

Redux原创内容，盗版必究。

Mobx本文作者：唐霜，转载请注明出处。

constate原创内容，盗版必究。

rematch【版权所有，侵权必究】

overstated原创内容，盗版必究。

react-immut原创内容，盗版必究。

小结【本文首发于唐霜的博客】

缓存衍生计算【未经授权禁止转载】

最小化渲染本文作者：唐霜，转载请注明出处。

Mobx著作权归作者所有，禁止商业用途转载。

react-immut著作权归作者所有，禁止商业用途转载。

小结【关注微信公众号：wwwtangshuangnet】

目录结构本文作者：唐霜，转载请注明出处。

Redux原创内容，盗版必究。

Mobx【本文首发于唐霜的博客】

constate【未经授权禁止转载】

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

overstated【版权所有，侵权必究】

react-immut【作者：唐霜】

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

性能【关注微信公众号：wwwtangshuangnet】

Redux原创内容，盗版必究。

Mobx著作权归作者所有，禁止商业用途转载。

ReactImmut著作权归作者所有，禁止商业用途转载。

小结原创内容，盗版必究。

最终结论【未经授权禁止转载】

为价值买单，打赏一杯咖啡

声明

关于

生态