react-deep-equal

1.1.3 • Public • Published

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

Package Sidebar

Install

npm i react-deep-equal

Homepage

~

Weekly Downloads

2

Version

1.1.3

License

MIT

Unpacked Size

9.71 kB

Total Files

7

Last publish

Collaborators

  • brucehuangtao