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

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

开发体验方面【关注微信公众号：wwwtangshuangnet】
- store 配置/model 定义未经授权，禁止复制转载。
- 状态使用方式【访问 www.tangshuang.net 获取更多精彩内容】
- 状态修改方式【版权所有】唐霜 www.tangshuang.net
- 缓存衍生计算未经授权，禁止复制转载。
- 最小化更新【版权所有，侵权必究】
- 目录结构（索引）转载请注明出处：www.tangshuang.net

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

【转载请注明来源】

原创内容，盗版必究。

运行方面【转载请注明来源】
- 性能未经授权，禁止复制转载。

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

原创内容，盗版必究。

【转载请注明来源】

参与对比的主要包含如下几个：本文版权归作者所有，未经授权不得转载。

immutable 典型代表 redux【本文受版权保护】本文版权归作者所有，未经授权不得转载。 (react-redux)

【未经授权禁止转载】

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

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

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

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

mutable 典型代表 mobx (m【作者：唐霜】【原创内容，转载请注明出处】obx-react)

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

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

纯 hooks 实现，例如 consta【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】te, unstate-next，此次挑本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。选 constate

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

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

原创内容，盗版必究。

【转载请注明来源】

【作者：唐霜】

Redux 包装，例如 Dva, rem著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】atch，此次挑选 rematch

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

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

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

先定义 model 再以 hooks 消【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】费，例如 overmind, overs【转载请注明来源】【版权所有】唐霜 www.tangshuang.nettated，此次挑选 overstate【原创不易，请尊重版权】【原创不易，请尊重版权】d

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

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

【转载请注明来源】

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

【关注微信公众号：wwwtangshuangnet】

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

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

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

下面我们开始进行对比吧。【未经授权禁止转载】

配置/定义方式【版权所有】唐霜 www.tangshuang.net

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

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

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

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 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

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 【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】部分。redux 基于 reducer，著作权归作者所有，禁止商业用途转载。【转载请注明来源】而 mobx 基于观察者模式，两者在思想【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】层面完全是两回事。

【作者：唐霜】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。转载请注明出处：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 的方式不同，而且【原创内容，转载请注明出处】【版权所有，侵权必究】 constate 本身是没有 stor【版权所有，侵权必究】【版权所有，侵权必究】e 概念的，只是我为了便于理解，把名字命【原创不易，请尊重版权】原创内容，盗版必究。名为 store 而已。它通过一个 co原创内容，盗版必究。转载请注明出处：www.tangshuang.netnstate 函数，生成一个 Provi【作者：唐霜】【未经授权禁止转载】der 和一个 useStore hoo【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。k 函数。它完全基于 hooks，没有自原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。己的 store。

rematch【作者：唐霜】

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

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

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【本文受版权保护】【关注微信公众号：wwwtangshuangnet】er 基础上进行分区，传不同分区给 mo【关注微信公众号：wwwtangshuangnet】【作者：唐霜】dels 这个参数。另一个好处是，不需要【关注微信公众号：wwwtangshuangnet】【本文受版权保护】自己去配置，自动默认支持异步操作。但是，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本质上，和 reducer 那套没有任何【本文受版权保护】著作权归作者所有，禁止商业用途转载。区别，而且在代码量上，几乎没有任何优势，【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。甚至感觉要写很多重复代码。

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

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

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

<Provider>
  ...
</Provider>

和前面所有的实现方案不同 oversta【版权所有，侵权必究】未经授权，禁止复制转载。ted 是内部自己保管了一个共享的全局【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】store。真正在用的时候，需要把上面定【本文受版权保护】【转载请注明来源】义好这个 store 传入到 hooks【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。中使用，例如：

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

后面这个 store 是 Some 的实本文版权归作者所有，未经授权不得转载。【作者：唐霜】例对象。用的时候才传入 Some，而非直【转载请注明来源】原创内容，盗版必究。接提供给 Provider。但是我比较困转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】惑的是，它为啥要提供一个 Provide【原创不易，请尊重版权】【本文受版权保护】r 呢？感觉没啥意义啊。

【未经授权禁止转载】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

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

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

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

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

用法上保持和 react-redux 一【本文受版权保护】【关注微信公众号：wwwtangshuangnet】致，仅仅是在定义 store 的时候，只【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】需要传入初始状态就行了，但是为了分区（上【本文受版权保护】【转载请注明来源】面代码写法），传入第二个参数更简单，比原创内容，盗版必究。本文作者：唐霜，转载请注明出处。rematch 那种省了 10 倍效率。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。不需要写大堆 reducer 代码。

小结【作者：唐霜】

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

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

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

【本文首发于唐霜的博客】【作者：唐霜】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

状态使用方式原创内容，盗版必究。

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

组件通过什么方式才能读取到全局状态？不同【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。管理器还还是有一点区别。

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net原创内容，盗版必究。

Redux & rematch【作者：唐霜】

React-redux 是 redux 【原创内容，转载请注明出处】【原创内容，转载请注明出处】连接组件的工具，由于 rematch 实【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】际上只是对 redux reducer 【本文受版权保护】【原创内容，转载请注明出处】逻辑的封装，所以也是用 react-re【转载请注明来源】本文作者：唐霜，转载请注明出处。dux 来做连接器。

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

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

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

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

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

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

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【作者：唐霜】

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

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

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

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

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

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

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

【本文受版权保护】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

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

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

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

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

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

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

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

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

状态修改方式【版权所有，侵权必究】

【未经授权禁止转载】【未经授权禁止转载】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

怎么才能修改到全局状态呢？可不可以只修改【原创不易，请尊重版权】【原创不易，请尊重版权】局部的状态，或者可否快速更新嵌套的属性？【版权所有，侵权必究】【转载请注明来源】经过我观察，更新状态的方式是对我们开发体本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net验最明显的地方。特别是异步操作，不同状态转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】管理器给人的感受可能存在天壤之别。

【本文受版权保护】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

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

【本文受版权保护】【本文受版权保护】【转载请注明来源】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

connect 会自动将 dispatc【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】h 方法加入 props 给组件使用。组转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】件从 props 上读取来自 conne【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netct map 的内容。最常用的异步处理，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net是使用中间件 redux-thunk。这【本文受版权保护】【本文受版权保护】个中间件允许 dispatch 接收一个本文作者：唐霜，转载请注明出处。【转载请注明来源】函数。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【访问 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，用于生【作者：唐霜】未经授权，禁止复制转载。成一个被 dispatch 接收的函数，【转载请注明来源】未经授权，禁止复制转载。而生成的函数拥有 dispatch 和【作者：唐霜】【作者：唐霜】getState 两个参数函数，在该函数著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】中，可以执行异步操作，并且使用 getS【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。tate 来获取整个 state。

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

在 store 中，修改全局状态极其简单著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】，直接修改对应的属性即可，它是 muta本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ble 的。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【转载请注明来源】

class Store {
  @observable
  name = null

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

由于可直接修改属性，所以异步操作变得很简本文作者：唐霜，转载请注明出处。【本文受版权保护】单，异步请求完，将新的数据赋值给对应的属【本文受版权保护】转载请注明出处：www.tangshuang.net性即可。

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

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

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【原创内容，转载请注明出处】【原创内容，转载请注明出处】

直接使用创建的 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【转载请注明来源】【本文首发于唐霜的博客】spatch 的逻辑：

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

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

但总体而言，还是 react-redux【转载请注明来源】著作权归作者所有，禁止商业用途转载。那一套。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

overstated【转载请注明来源】

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

【转载请注明来源】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

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

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

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

【本文受版权保护】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

react-immut 提供了多种 di【未经授权禁止转载】未经授权，禁止复制转载。spatch 的方式，最容易理解的就是通【未经授权禁止转载】【未经授权禁止转载】过 key->value 的形式更未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】新状态。

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

dispatch('key', value)

简单直观，但是不适合批量更新。而依赖 i未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。mmer 的能力，批量更新也很方便

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

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

缓存衍生计算【作者：唐霜】

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

【本文受版权保护】原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

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

最小化渲染本文版权归作者所有，未经授权不得转载。

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

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

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

class Some {
  @observable
  name = 'tom'

  @observable
  age = 10
}

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

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

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

init({
  name: 'tomy',
})

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

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

最小化渲染【版权所有】唐霜 www.tangshuang.net	redux(redux-react)本文作者：唐霜，转载请注明出处。	mobx(mobx-react)【转载请注明来源】	constate著作权归作者所有，禁止商业用途转载。	rematch本文版权归作者所有，未经授权不得转载。	overstated转载请注明出处：www.tangshuang.net	react-immut【转载请注明来源】
仅指定属性变化时再渲染本文版权归作者所有，未经授权不得转载。	❌原创内容，盗版必究。	✅【版权所有】唐霜 www.tangshuang.net	❌原创内容，盗版必究。	❌【作者：唐霜】	❌【未经授权禁止转载】	✅【原创不易，请尊重版权】
无 this【关注微信公众号：wwwtangshuangnet】	✅【版权所有】唐霜 www.tangshuang.net	❌【关注微信公众号：wwwtangshuangnet】	✅本文版权归作者所有，未经授权不得转载。	✅原创内容，盗版必究。	❌本文版权归作者所有，未经授权不得转载。	✅原创内容，盗版必究。

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

我们主要想讨论下，哪个状态管理器能够以更【原创不易，请尊重版权】【未经授权禁止转载】清晰的目录结构来管理模块状态。

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

【作者：唐霜】原创内容，盗版必究。【作者：唐霜】

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

Mobx【未经授权禁止转载】

转载请注明出处：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【版权所有】唐霜 www.tangshuang.net

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

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

目录结构本文版权归作者所有，未经授权不得转载。	redux(redux-react)【关注微信公众号：wwwtangshuangnet】	mobx(mobx-react)【原创不易，请尊重版权】	constate原创内容，盗版必究。	rematch【版权所有，侵权必究】	overstated【原创内容，转载请注明出处】	react-immut【原创不易，请尊重版权】
简洁性评分【原创内容，转载请注明出处】	0原创内容，盗版必究。	0.5【版权所有，侵权必究】	4本文作者：唐霜，转载请注明出处。	3本文作者：唐霜，转载请注明出处。	5转载请注明出处：www.tangshuang.net	5【本文受版权保护】
无 this未经授权，禁止复制转载。	✅【关注微信公众号：wwwtangshuangnet】	❌【本文受版权保护】	✅【访问 www.tangshuang.net 获取更多精彩内容】	✅本文版权归作者所有，未经授权不得转载。	❌【关注微信公众号：wwwtangshuangnet】	✅【本文受版权保护】

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

性能测试非常麻烦，因为不同管理器的编程方【未经授权禁止转载】转载请注明出处：www.tangshuang.net式不同，没有办法找到一个可以作为标准的方转载请注明出处：www.tangshuang.net【本文受版权保护】式衡量。但是为了进行对比，我姑且平衡下面【关注微信公众号：wwwtangshuangnet】【本文受版权保护】的因素来做对比：

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

实现相同效果：一个渲染10000行的ta未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ble组件的实现

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

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

原创内容，盗版必究。

【本文受版权保护】

最优化：对所有管理器进行尽可能最高程度的【作者：唐霜】【本文受版权保护】优化，使它们都发挥自己最大的优势

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

【未经授权禁止转载】

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

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

评价指标：【本文受版权保护】

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

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

【未经授权禁止转载】

【作者：唐霜】

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

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

原创内容，盗版必究。

更新2条不连续的记录渲染时间著作权归作者所有，禁止商业用途转载。

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

原创内容，盗版必究。

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

评价方法：未经授权，禁止复制转载。

编写相同的基础组件，所有管理器都使用这些本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】组件

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

【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】

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

【关注微信公众号：wwwtangshuangnet】

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

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

【本文受版权保护】

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

每个管理器测试 5 次，去除最高最低，取本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net最优值

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

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

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

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

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

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

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

用于对比的代码可以在转载请注明出处：www.tangshuang.net这里著作权归作者所有，禁止商业用途转载。阅读。转载请注明出处：www.tangshuang.net

Redux【本文受版权保护】

黄色部分是 script 执行时间，该次【转载请注明来源】【原创不易，请尊重版权】截图消耗 1281ms。

该次截图是更新时消耗，脚本部分用时 28【转载请注明来源】【作者：唐霜】5ms。而真正执行 update 函数（【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net修改数据）仅 1ms。

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

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

【原创不易，请尊重版权】【原创不易，请尊重版权】【转载请注明来源】【未经授权禁止转载】

基于 mobx + mobx-react【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】的架构，第一次渲染耗时 1996ms，【原创内容，转载请注明出处】【本文受版权保护】更新用时 430ms 左右。

该次截图中，黄色脚本执行部分耗时 118未经授权，禁止复制转载。【本文首发于唐霜的博客】1ms。

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

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【原创不易，请尊重版权】

该次截图更新脚本耗时 374ms。upd转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ate 函数消耗 30ms。

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

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

【未经授权禁止转载】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【本文受版权保护】

本次截图脚本耗时 1049ms。【关注微信公众号：wwwtangshuangnet】

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

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

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

【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

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

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

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

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

2020-09-13 9030

唐霜

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

配置/定义方式【版权所有】唐霜 www.tangshuang.net

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

mobx原创内容，盗版必究。

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

rematch【作者：唐霜】

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

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

小结【作者：唐霜】

状态使用方式原创内容，盗版必究。

Redux & rematch【作者：唐霜】

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

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

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

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

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

状态修改方式【版权所有，侵权必究】

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

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

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

rematch原创内容，盗版必究。

overstated【转载请注明来源】

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

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

缓存衍生计算【作者：唐霜】

最小化渲染本文版权归作者所有，未经授权不得转载。

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

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

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

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

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

Mobx【未经授权禁止转载】

constate【本文受版权保护】

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

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

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

小结【转载请注明来源】

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

Redux【本文受版权保护】

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

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

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

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

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

声明

关于

生态