react Immutability 理解

在开发过程中经常会遇到state里有数组和对象的情况,比如当用splice去改变数组再调用setState更新的时候,会发现并没有生效,这是因为react里的state是Immutability(不可变的),所以要保证state是Immutability,但是数组和对象并不是Immutability,这时需要用一些手段去保证Immutability。

1、状态类型是不可变类型(数值、字符串、布尔值、null、undefined)

  因为状态是不可变类型,所以直接赋一个新值即可

2、状态的类型是数组时(concat、slice、filter、ES6 spread syntax)

  数组的push、pop、splice等方法都会修改原数组,不能保证Immutability

3、状态的类型是对象时(Object.assign()、object spread syntax)

4、还可以使用一些Immutable的库

react中的state是Immutability有什么好处呢?

这里涉及到react的性能优化,react内部会维护一份UI(虚拟DOM),当组件属性或状态发生改变,react对应的虚拟DOM数据也会更新,不用更新真正的DOM,更加方便快捷,然后react会对现在和更新前的虚拟DOM进行比较,找出变化的元素,只有变化的元素会在真实DOM中更新,但是有时候一些DOM元素自身没有变化,但会被其他元素影响造成重新渲染,这个时候可以用shouldComponentUpdate方法来判断props或state是不是真的改变了(改变了返回true,否则返回false)。如果组件的属性和状态是Immutability的对象或值,就可以通过相等来比较了

原文地址:https://www.cnblogs.com/ruoshuisanqian/p/10542836.html