React实战－Reactjs中的如何通过不可变数据对象提高页面性能
React实战－Reactjs中的如何通过不可变数据对象提高页面性能
在使用ReactJs之后，我们知道Reactjs的UI更新方式，由于props或者state的数据变化都将导致页面的render，而ReactJs是组件化的，小组件组装成大组件，大组件组装成页面，每个组件都有自己的内部数据，任何的数据变化都将引起页面重绘，尽管有虚拟Dom，依然对性能存在较大的影响，不可变数据的应用大大的减少了这种影响，提高了重绘的次数。微信号：react-javascript
1.在ReactJS中的数据对象
在ReactJS 中主要是props 和state：
- props是不可变的
props在子组件构造时由父组件传人子组件或自定义初始值，在子组件中不能改变props的值，只能读取：采用this.props.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）加入类库
nam install immutable
2)引入类库，并使用
var Immutable = require(‘immutable’);
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set(‘b’, 50);
map1.get(‘b’); // 2
map2.get(‘b’); // 50
以上代码可以看出map2是新创建的数据对象，与传统的map操作不同。
3）需要注意的地方
在使用Immutable时，我们需要注意的是：immutable虽然支持 List, Stack, Map, OrderedMap, Set, OrderedSet 和 Record，但用法存在区别，具体还说看官网说明吧。
5.总结
在reactjs中页面的更新围绕着数据而来，不再是我们主动去操作页面的Dom，然而由于组件化的嵌套，会导致很多无谓的页面更新，我们需要减少这些更新，判断数据是否变化。在React，redux中采用了immtable的数据，简化了这种数据变化的判断，也就减少了数据更新导致的页面变化，提高页面性能。
待我称王封你为后i
迷南。
亦凉
还没有评论，来说两句吧...