React实战－Reactjs中的如何通过不可变数据对象提高页面性能

我不是女神ヾ 2022-07-16 06:14 156阅读 0赞

在使用ReactJs之后，我们知道Reactjs的UI更新方式，由于props或者state的数据变化都将导致页面的render，而ReactJs是组件化的，小组件组装成大组件，大组件组装成页面，每个组件都有自己的内部数据，任何的数据变化都将引起页面重绘，尽管有虚拟Dom，依然对性能存在较大的影响，不可变数据的应用大大的减少了这种影响，提高了重绘的次数。微信号：react-javascript

1.在ReactJS中的数据对象

在ReactJS 中主要是props 和state：

*  props是不可变的

props在子组件构造时由父组件传人子组件或自定义初始值，在子组件中不能改变props的值，只能读取：采用this.props.name。

父组件定义：<ProductRow name=\{name\} key=\{product.name\} />

子组件设定初始值：getDefaultProps。

*  **state**是可变的

state是在组件内部运用的，由getInitialState()进行初始化创建。在组件内部均可改变。改变的方式是this.setState()。

2.如何在Reactjs中减少render

那么如何在reactjs中减少render提高性能呢，主要还是从props和state入手。在Reactjs中只要state变化或者props变化,都会重新render，这里的变化并非值值真多变了，即使是相同的值，因为重新输入了，也会导致render。因此reactjs提供了一个函数以阻止render：shouldComponentUpdate。

我们需要在state和props有新值的时候进行判断，是否需要render，如果不需要，则返回false。如下：

shouldComponentUpdate: function(nextProps, nextState) \{

return nextProps.id !== this.props.id;

3.如何简单快捷的判断是否需要render

从上面我们可以看出reactjs提供了阻止render的方法，但是如何快速判断是否需要render依然是个问题，因为判断一个复杂的数据对象是否跟之前的值是否相同并不容易。

Redux将这个问题极简化了，整个应用共用一个state。但也带来了更复杂的问题，就是state的结构可能非常复杂，如果判断是否更新呢？Redux又一次极简了，那就是采用不可变数据。

我们在判断数据是否相同时，并不需要深入判断数据对象的值是否相同，只需要浅比较即可，也就是判断是否为同一个数据对象地址，因为不可变数据对象在数据变化时均会重新创建一个新的数据对象，数据对象的地址不会相同。这也就是为什么在Reactjs，Redux中才有不可变数据对象。

4.如何创建不可变数据对象

不可变数据对象可以自己去定义和维护，也可以采用第三方类库。

a.自己定义和维护不可变数据对象也很简单，只需要记住数据的更新将产生新的数据对象，而不是在原有对象上进行数据操作。

b.如果采用第三方，则可以采用immutable类库。使用也很简单，可参考官网：http://facebook.github.io/immutable-js/。

1）加入类库