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

/react-deep-equal/

    Package Sidebar

    Install

    npm i react-deep-equal

    Homepage

    ~

    Weekly Downloads

    11

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    9.71 kB

    Total Files

    7

    Last publish

    Collaborators

    • brucehuangtao