react-deep-equal
v1.1.3
Published
improve your react's app's performance
Downloads
3
Maintainers
Readme
React 性能损失: 在react当中父组件的重新渲染会带动子组件的重新渲染,当子组件不需要重新调用render方法时。
子组件的重新渲染会造成一部分的性能损失。因为react首先要生成虚拟dom,然后做对比,再决定是否操作dom。
为什么要使用react-deep-equal(why react deep equal): 在react中有PureComponent,它实现了shouldComponentUpdate,它底层使用的是shallowEqual这个函数,它源码实现起来非常的简单,同级别比较,并且对引用类型值是无效的。
比如:
{list:[]}
对于这种是无效的。特别是在子组件的state需要大量渲染列表或者嵌套层级比较深的情况下。
为解决性能问题,我提供了一个通用的折中的函数,将子组件的受的影响部分性能降到一个可以接受的程度。
用法(usage):
npm install react-deep-equal --save
导入(import):
import deepEqual from "react-deep-equal";
..
shouldComponentUpdate(nextProps,nextState){
return !deepEqual(this.props,nextProps,true)||!deepEqual(this.state,nextState,true);
}
参数详解(parameter detail): /** *@param(Objone) pure object *@param(ObjTwo) pure object *@param(ignoreObjKeyTurn)如果为true则忽视对象key的顺序,如果为false则考虑对象key顺序,如果是未定义的取默认值true。 **/
deepEqual(objone,objtwo,ignoreObjKeyTurn)
//tips:no function->function is ok now