为什么React中this.state不要直接修改,而是创建新的副本?

阅读到这里http://camsong.github.io/redux-in-chinese/docs/basics/Reducers.html

注意:

不要修改 state。 使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter }),因为它会改变第一个参数的值。一定要把第一个参数设置为空对象。也可以使用 ES7 中还在试验阶段的特性 { ...state, ...newState },参考 对象展开语法。

在 default 情况下返回旧的 state。遇到未知的 action 时,一定要返回旧的 state。

阅读 11k
3 个回答

应该不是不可以,而是强烈不建议这么做吧。这应该与React推崇的immutability有关。
在其他framework如angular中,侦知一个变量变化通过watchdeepwatch,尤其deepwatch在判断一个数据量大的变量是否变化时会消耗很多资源,导致应用性能下降。

React中,通过“有变化,就一定返回一个新对象;没变化,原对象不做变化直接返回”的原则,永远可以通过判断“新旧变量是否对同一内存内容的引用”来侦测变化,效率上比deepwatch高得多

新手上路,请多包涵

如果直接在State上修改的话,Redux是没办法检测出state的变化的,组件也不会更新。

新手上路,请多包涵

要知道setState本质是通过一个队列机制实现state更新的。 执行setState时,会将需要更新的state合并后放入状态队列,而不会立刻更新state,队列机制可以批量更新state。
如果不通过setState而直接修改this.state,那么这个state不会放入状态队列中,下次调用setState时对状态队列进行合并时,会忽略之前直接被修改的state,这样我们就无法合并了,而且实际也没有把你想要的state更新上去。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题