Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

React 修改state没有重新渲染的问题

发布于:  

使用react-reduxreducer中修改了state 但是却发现组件没有rerender. 感觉很是奇怪, 不知道哪里出了问题

问题查出来原因是因为直接修改了state. 查到文档:

为何组件没有被重新渲染、或者 mapStateToProps 没有运行?

目前来看,导致组件在 action 分发后却没有被重新渲染,最常见的原因是对 state 进行了直接修改。Redux 期望 reducer 以 “不可变的方式” 更新 state,实际使用中则意味着复制数据,然后更新数据副本。如果直接返回同一对象,即使你改变了数据内容,Redux也会认为没有变化。类似的,React Redux 会在 shouldComponentUpdate 中对新的 props 进行浅层的判等检查,以期提升性能。如果所有的引用都是相同的,则返回 false 从而跳过此次对组件的更新。

对于嵌套的值, 也要返回数据副本. 例如数据是 state.a.b.c.d,你想更新 d,你也必须返回 cba 以及 state 的拷贝。

下图展示了state树的深层变化为何要改变途径的节点. state 树

对于js对象不可变更新的目的

  • 使用类似于 Object.assign() 或者 _.extend() 的方法复制对象, slice()concat() 方法复制数组。
  • ES6 数组的 spread sperator(展开运算符),JavaScript 新版本提案中类似的对象展开运算符。
  • 将不可变更新逻辑包装成简单方法的工具库。

厚颜一下 ~^_^~

赏赐