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

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

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

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

原创内容，盗版必究。

运行方面【版权所有，侵权必究】
- 性能未经授权，禁止复制转载。

【未经授权禁止转载】

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

【本文受版权保护】

参与对比的主要包含如下几个：转载请注明出处：www.tangshuang.net

【转载请注明来源】【本文首发于唐霜的博客】【本文受版权保护】

immutable 典型代表 redux【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】 (react-redux)

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

原创内容，盗版必究。

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

【未经授权禁止转载】

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

【转载请注明来源】

原创内容，盗版必究。

【本文受版权保护】

纯 hooks 实现，例如 consta【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】te, unstate-next，此次挑原创内容，盗版必究。【未经授权禁止转载】选 constate

原创内容，盗版必究。

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

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

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

Redux 包装，例如 Dva, rem【作者：唐霜】【版权所有，侵权必究】atch，此次挑选 rematch

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

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

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

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

先定义 model 再以 hooks 消【作者：唐霜】【本文受版权保护】费，例如 overmind, overs【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。tated，此次挑选 overstate转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】d

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

【作者：唐霜】

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

自家产品 react-immut【版权所有，侵权必究】

【作者：唐霜】

【转载请注明来源】

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

下面我们开始进行对比吧。本文版权归作者所有，未经授权不得转载。

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

配置/定义方式原创内容，盗版必究。

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

简单的说，基本上大部分全局状态管理器都依【作者：唐霜】【本文首发于唐霜的博客】赖一个初始的配置/定义，来明确要管理的状原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。态的初始结构。

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

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】【本文受版权保护】

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原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】操作来进行分区（分区概念是指将一个庞大原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的 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【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】x 的最大不同在于如何定义 store 【原创不易，请尊重版权】原创内容，盗版必究。部分。redux 基于 reducer，【作者：唐霜】【版权所有】唐霜 www.tangshuang.net而 mobx 基于观察者模式，两者在思想本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。层面完全是两回事。

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

constate【本文受版权保护】

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

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【作者：唐霜】【版权所有，侵权必究】nstate 函数，生成一个 Provi本文作者：唐霜，转载请注明出处。原创内容，盗版必究。der 和一个 useStore hoo【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。k 函数。它完全基于 hooks，没有自未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】己的 store。

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

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

Rematch 是在 redux 上面封【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。装了一层，本质上还是 redux。封装的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。一层对于我们而言，最主要是对前文所说的【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】reducer 分区进行了调整，让 ac【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】tion 的功能分开，不需要写在一个函数未经授权，禁止复制转载。【原创不易，请尊重版权】内部。同时，它增加了 action 的扩【访问 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【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】dels 这个参数。另一个好处是，不需要本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。自己去配置，自动默认支持异步操作。但是，【转载请注明来源】【原创内容，转载请注明出处】本质上，和 reducer 那套没有任何【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】区别，而且在代码量上，几乎没有任何优势，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。甚至感觉要写很多重复代码。

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

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

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

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

<Provider>
  ...
</Provider>

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

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

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

【转载请注明来源】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】

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

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

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

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

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

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

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

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

状态使用方式本文作者：唐霜，转载请注明出处。

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

组件通过什么方式才能读取到全局状态？不同未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。管理器还还是有一点区别。

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

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

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

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

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

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

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

@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 提供的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。状态属性注入到组件中。@inject 接【版权所有】唐霜 www.tangshuang.net【本文受版权保护】收的内容和 map 效果一致。

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

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

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 的依据，另一方面也是取出对应【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net store 的依据。

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

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

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

虽然 react-immut 也提供 c【本文受版权保护】【本文受版权保护】onnect 方案，但是使用 hooks著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。更方便，通过 useStore 直接读原创内容，盗版必究。【本文受版权保护】取整个 store 的 state 和著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。dispatch。通过传入 keyPat未经授权，禁止复制转载。【本文受版权保护】h 可以缩小作用域。

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

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

小结【作者：唐霜】

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

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

原创内容，盗版必究。【转载请注明来源】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

状态修改方式本文作者：唐霜，转载请注明出处。

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

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

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

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

【原创不易，请尊重版权】【原创内容，转载请注明出处】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

connect 会自动将 dispatc本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】h 方法加入 props 给组件使用。组本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。件从 props 上读取来自 conne【转载请注明来源】本文版权归作者所有，未经授权不得转载。ct map 的内容。最常用的异步处理，【未经授权禁止转载】未经授权，禁止复制转载。是使用中间件 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 函数被称【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】为 action creator，用于生【转载请注明来源】本文作者：唐霜，转载请注明出处。成一个被 dispatch 接收的函数，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。而生成的函数拥有 dispatch 和【本文受版权保护】著作权归作者所有，禁止商业用途转载。getState 两个参数函数，在该函数转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】中，可以执行异步操作，并且使用 getS本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。tate 来获取整个 state。

【未经授权禁止转载】【本文首发于唐霜的博客】【本文首发于唐霜的博客】【作者：唐霜】

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

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

在 store 中，修改全局状态极其简单【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，直接修改对应的属性即可，它是 muta转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ble 的。

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

class Store {
  @observable
  name = null

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

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

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

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【关注微信公众号：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未经授权，禁止复制转载。【本文首发于唐霜的博客】spatch 的逻辑：

【本文首发于唐霜的博客】【作者：唐霜】【本文受版权保护】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

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

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

由于在 overstated 中需要事先【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】定义 store，而在定义时需要调用 t【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。his.setState 来更新状态，所本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】以异步操作也自然而言不需要复杂逻辑。

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

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

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

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

dispatch('key', value)

简单直观，但是不适合批量更新。而依赖 i转载请注明出处：www.tangshuang.net【未经授权禁止转载】mmer 的能力，批量更新也很方便

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

由于 react-immut 也提供分区【本文受版权保护】【关注微信公众号：wwwtangshuangnet】方式载入到 store 中，异步能力也提未经授权，禁止复制转载。【原创不易，请尊重版权】前考虑了。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。【转载请注明来源】

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

缓存衍生计算著作权归作者所有，禁止商业用途转载。

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

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

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

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

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

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

所谓最小化渲染，是指不要 state 有【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。一点点变动，都触发所有被 connect【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。/observe 的组件进行更新，应该在【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。只有被依赖的 state 节点变化时，才著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。进行更新（依赖收集）。目前能够完全做到这原创内容，盗版必究。【本文受版权保护】一点的，仅有 mobx 能做到。不过在【原创不易，请尊重版权】【作者：唐霜】react-immut 中，也能在无根【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 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本文作者：唐霜，转载请注明出处。

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

init({
  name: 'tomy',
})

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

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

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

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

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

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

我们主要想讨论下，哪个状态管理器能够以更【作者：唐霜】【关注微信公众号：wwwtangshuangnet】清晰的目录结构来管理模块状态。

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

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

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

- 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【版权所有】唐霜 www.tangshuang.net

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

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

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

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

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

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

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

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

实现相同效果：一个渲染10000行的ta【原创不易，请尊重版权】【本文首发于唐霜的博客】ble组件的实现

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

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

原创内容，盗版必究。

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

【关注微信公众号：wwwtangshuangnet】

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

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

第一次渲染时间转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

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

更新2条不连续的记录渲染时间【转载请注明来源】

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

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

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

【未经授权禁止转载】

评价方法：本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】原创内容，盗版必究。【原创不易，请尊重版权】【本文首发于唐霜的博客】

编写相同的基础组件，所有管理器都使用这些转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。组件

【未经授权禁止转载】

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

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

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

原创内容，盗版必究。

通过 chrome performanc本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。e 记录结果

【未经授权禁止转载】

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

原创内容，盗版必究。

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

每个管理器测试 5 次，去除最高最低，取本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】最优值

原创内容，盗版必究。

【未经授权禁止转载】

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

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

由于条件限制，我只做 redux, mo【原创不易，请尊重版权】【本文首发于唐霜的博客】bx 和 react-immut 的对比

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

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

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

Redux【本文受版权保护】

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

基于 redux + react-red【原创不易，请尊重版权】【作者：唐霜】ux 的架构，在渲染 10000 行数据【未经授权禁止转载】【本文受版权保护】时，平均耗时 2295ms，更新用时平均【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 340ms 左右。

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

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

黄色部分是 script 执行时间，该次【本文受版权保护】本文作者：唐霜，转载请注明出处。截图消耗 1281ms。

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

该次截图是更新时消耗，脚本部分用时 28【未经授权禁止转载】【原创不易，请尊重版权】5ms。而真正执行 update 函数（【本文首发于唐霜的博客】【原创内容，转载请注明出处】修改数据）仅 1ms。

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

Mobx【作者：唐霜】

基于 mobx + mobx-react【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】的架构，第一次渲染耗时 1996ms，【原创不易，请尊重版权】【原创不易，请尊重版权】更新用时 430ms 左右。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【作者：唐霜】

该次截图中，黄色脚本执行部分耗时 118【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】1ms。

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

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

该次截图更新脚本耗时 374ms。upd未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netate 函数消耗 30ms。

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

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

基于 react-immut 来实现，第未经授权，禁止复制转载。【原创内容，转载请注明出处】一次渲染耗时 1850ms，更新用时 3【未经授权禁止转载】【本文受版权保护】88ms。

本次截图脚本耗时 1049ms。本文作者：唐霜，转载请注明出处。

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

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

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

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

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

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

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

【转载请注明来源】【原创不易，请尊重版权】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

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

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

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

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

2020-09-13 9164

唐霜

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

配置/定义方式原创内容，盗版必究。

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

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

constate【本文受版权保护】

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

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

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

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

状态使用方式本文作者：唐霜，转载请注明出处。

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

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

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

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

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

小结【作者：唐霜】

状态修改方式本文作者：唐霜，转载请注明出处。

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

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

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

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

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

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

小结【转载请注明来源】

缓存衍生计算著作权归作者所有，禁止商业用途转载。

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

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

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

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

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

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

Mobx原创内容，盗版必究。

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

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

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

react-immut【本文受版权保护】

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

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

Redux【本文受版权保护】

Mobx【作者：唐霜】

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

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

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

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

声明

关于

生态