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

广告位招租
扫码页面底部二维码联系

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

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。
  • 开发体验方面 【关注微信公众号:wwwtangshuangnet】
    • store 配置/model 定义未经授权,禁止复制转载。
    • 【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【本文受版权保护】
    • 状态使用方式【访问 www.tangshuang.net 获取更多精彩内容】
    • 【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】
    • 状态修改方式【版权所有】唐霜 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】
  • immutable 典型代表 redux【本文受版权保护】本文版权归作者所有,未经授权不得转载。 (react-redux)
  • 【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】
  • mutable 典型代表 mobx (m【作者:唐霜】【原创内容,转载请注明出处】obx-react)
  • 转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】
  • 纯 hooks 实现,例如 consta【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】te, unstate-next,此次挑本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。选 constate
  • 转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【转载请注明来源】【作者:唐霜】
  • Redux 包装,例如 Dva, rem著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】atch,此次挑选 rematch
  • 【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。
  • 先定义 model 再以 hooks 消【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】费,例如 overmind, overs【转载请注明来源】【版权所有】唐霜 www.tangshuang.nettated,此次挑选 overstate【原创不易,请尊重版权】【原创不易,请尊重版权】d
  • 【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】
  • 自家产品 react-immut转载请注明出处:www.tangshuang.net
  • 【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。

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

【作者:唐霜】未经授权,禁止复制转载。【作者:唐霜】【版权所有,侵权必究】

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

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

简单的说,基本上大部分全局状态管理器都依【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】赖一个初始的配置/定义,来明确要管理的状【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net态的初始结构。

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

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未经授权,禁止复制转载。

著作权归作者所有,禁止商业用途转载。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 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原创内容,盗版必究。转载请注明出处:www.tangshuang.netnstate 函数,生成一个 Provi【作者:唐霜】【未经授权禁止转载】der 和一个 useStore hoo【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。k 函数。它完全基于 hooks,没有自原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。己的 store。

本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】未经授权,禁止复制转载。

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 那套没有任何【本文受版权保护】著作权归作者所有,禁止商业用途转载。区别,而且在代码量上,几乎没有任何优势,【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。甚至感觉要写很多重复代码。

转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。【访问 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.net【原创不易,请尊重版权】store。真正在用的时候,需要把上面定【本文受版权保护】【转载请注明来源】义好这个 store 传入到 hooks【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。 中使用,例如:

转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【版权所有】唐霜 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 获取更多精彩内容】【原创内容,转载请注明出处】
配置/定义转载请注明出处: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【作者:唐霜】

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。

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

【未经授权禁止转载】【未经授权禁止转载】【版权所有,侵权必究】转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】
const mapStateToProps = (state) => {
  return { ...state }
}
export default connect(mapStateToProps)(MyComponent)

完全通过将 state map 到 pr【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ops 的方式,将 state 传入组件【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。后使用。

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

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 函数生成的,需要引入
}

useStore 得到的结果完全由 de【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】fineStore 的返回值决定,感觉非本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。常直接。

【版权所有,侵权必究】【版权所有,侵权必究】【原创内容,转载请注明出处】未经授权,禁止复制转载。

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 可以缩小作用域。

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【未经授权禁止转载】
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本文作者:唐霜,转载请注明出处。 本文作者:唐霜,转载请注明出处。 原创内容,盗版必究。 【转载请注明来源】 【转载请注明来源】 未经授权,禁止复制转载。 未经授权,禁止复制转载。
便捷获取子属性未经授权,禁止复制转载。 【本文受版权保护】 未经授权,禁止复制转载。 未经授权,禁止复制转载。 【原创内容,转载请注明出处】 原创内容,盗版必究。 本文作者:唐霜,转载请注明出处。

react-redux 提供了 useS本文作者:唐霜,转载请注明出处。【未经授权禁止转载】elector 这个 hook 函数,不【版权所有,侵权必究】【版权所有,侵权必究】仅可以在里面直接 map state,而【本文受版权保护】【未经授权禁止转载】且还借鉴了 reslect 的思想实现缓未经授权,禁止复制转载。【转载请注明来源】存。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【原创不易,请尊重版权】

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

【未经授权禁止转载】【未经授权禁止转载】【原创不易,请尊重版权】【访问 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】

著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net

在 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【转载请注明来源】

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

由于在 overstated 中需要事先本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】定义 store,而在定义时需要调用 t【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。his.setState 来更新状态,所【本文首发于唐霜的博客】【版权所有,侵权必究】以异步操作也自然而言不需要复杂逻辑。

【转载请注明来源】本文作者:唐霜,转载请注明出处。【访问 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 = []
})

由于 react-immut 也提供分区【版权所有,侵权必究】未经授权,禁止复制转载。方式载入到 store 中,异步能力也提【版权所有,侵权必究】【本文首发于唐霜的博客】前考虑了。

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
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【本文首发于唐霜的博客】 【转载请注明来源】 本文作者:唐霜,转载请注明出处。 原创内容,盗版必究。 【转载请注明来源】 本文版权归作者所有,未经授权不得转载。 【原创内容,转载请注明出处】

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

【本文受版权保护】【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

读取 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【本文首发于唐霜的博客】 本文版权归作者所有,未经授权不得转载。 【未经授权禁止转载】 【版权所有,侵权必究】 著作权归作者所有,禁止商业用途转载。 原创内容,盗版必究。 未经授权,禁止复制转载。

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

转载请注明出处:www.tangshuang.net【本文受版权保护】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。

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

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

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【作者:唐霜】
最小化渲染【版权所有】唐霜 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 获取更多精彩内容】

【版权所有】唐霜 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【本文受版权保护】

【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。
- 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

小结【转载请注明来源】

【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。【作者:唐霜】转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。

在所有管理器中,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 都不【作者:唐霜】著作权归作者所有,禁止商业用途转载。需要,是所有管理器里面最简洁的。

本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net
目录结构本文版权归作者所有,未经授权不得转载。 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式不同,没有办法找到一个可以作为标准的方转载请注明出处:www.tangshuang.net【本文受版权保护】式衡量。但是为了进行对比,我姑且平衡下面【关注微信公众号:wwwtangshuangnet】【本文受版权保护】的因素来做对比:

【原创不易,请尊重版权】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net
  • 实现相同效果:一个渲染10000行的ta未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ble组件的实现
  • 著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】原创内容,盗版必究。【本文受版权保护】
  • 最优化:对所有管理器进行尽可能最高程度的【作者:唐霜】【本文受版权保护】优化,使它们都发挥自己最大的优势
  • 转载请注明出处:www.tangshuang.net【未经授权禁止转载】【原创内容,转载请注明出处】【原创不易,请尊重版权】

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

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】
  • 第一次渲染时间【访问 www.tangshuang.net 获取更多精彩内容】
  • 【未经授权禁止转载】【作者:唐霜】转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。
  • 更新2条不连续的记录渲染时间著作权归作者所有,禁止商业用途转载。
  • 【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

评价方法:未经授权,禁止复制转载。

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

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

【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。
  • 由于条件限制,我只做 redux, mo本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】bx 和 react-immut 的对比
  • 【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。

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

原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。

Redux【本文受版权保护】

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

基于 redux + react-red【转载请注明来源】本文作者:唐霜,转载请注明出处。ux 的架构,在渲染 10000 行数据【关注微信公众号:wwwtangshuangnet】【作者:唐霜】时,平均耗时 2295ms,更新用时平均【版权所有,侵权必究】【作者:唐霜】 340ms 左右。

【版权所有】唐霜 www.tangshuang.net【作者:唐霜】转载请注明出处:www.tangshuang.net

【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】

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

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

【原创不易,请尊重版权】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】

该次截图是更新时消耗,脚本部分用时 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】【原创不易,请尊重版权】【本文受版权保护】

基于 react-immut 来实现,第【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。一次渲染耗时 1850ms,更新用时 3本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】88ms。

【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。【本文受版权保护】【原创内容,转载请注明出处】【本文受版权保护】

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。

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

【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【转载请注明来源】【版权所有,侵权必究】

【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】转载请注明出处:www.tangshuang.net

本次截图脚本用时 325ms,真正的 u【本文受版权保护】【版权所有】唐霜 www.tangshuang.netpdate 函数耗时 6ms。

【版权所有,侵权必究】【作者:唐霜】【转载请注明来源】【本文受版权保护】

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

【未经授权禁止转载】【本文受版权保护】未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net

在首次渲染 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 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】

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

【未经授权禁止转载】【访问 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 获取更多精彩内容】【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。【作者:唐霜】

2020-09-13 9030

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

本文价值90.3RMB