react Immutability 理解

Posted 2021-02-13 ruoshuisanqian

在开发过程中经常会遇到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的对象或值，就可以通过相等来比较了