React 性能优化

有个很重要的方向：
就是避免不必要的渲染。

React将render函数返回的虚拟DOM树与老的进行比较，从而确定DOM要不要更新，怎么更新。

render何时会被触发
组件挂载：组件构建并将DOM插入页面的过程就是挂载。

setSate()方法被调用
通常情况下，执行 setState 会触发 render。

父组件重新渲染
例如在父组件里面写setState??

优化render我们能做什么？
在react类组件中，可以使用shouldComponentUpdate或者PureComponent来减少因父组件更新。
shouldComponentUpdate 来决定是否组件是否重新渲染，如果不希望组件重新渲染，返回 false 即可。

利用高阶组件
在函数组件中，可以利用高阶组件。

使用 React.memo
16.6一个新api，用来缓存组件的渲染，避免不必要的更新。不同的是，React.memo只能用于函数组件。

合理(纵向)拆分组件

纯函数
PureRender是React组件开发中一个重要的概念,PureRender中的Pure指的就是组件满足纯函数的条件,
即组件的渲染是被相同的props和state渲染进而得到相同的结果.
2.react-addons-pure-render-mixin插件,其原理为重新实现了shouldComponentUpdate生命周期方法,
让当前传入的props和state与之前的作浅比较,如果返回false,那么组件就不会执行render方法.
这里讲到了用shouldComponentUpdate来做性能优化的方法,在理想情况下,不考虑props和state的类型,
那么要做到充分比较,只能通过深比较,但它实在是太昂贵了.
然后PureRender对object只做了引用比较,并没有做值比较.

shallowEqual(obj, newObj) {
    if (obj === newObj) {
        return true;
    }

    const objKeys = Object.keys(obj);
    const newObjKeys = Object.keys(newObj);

    if (objKeys.length !== newObjKeys.length) {
        return false;
    }

    // 关键代码,
}

shouldComponentUpdate(props, state) {
    console.log(props);
    console.log(state);

    if (state.a === 3) {
        return false;
    }

    return true;
}

key
1.写动态子组件的时候,如果没有给动态子项添加key prop,则会报一个警告.
这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个唯一的key prop.
key用来标识当前项的唯一性的props.
如过key={ index },把key设成了序号,这么做的确不会报警了,但这是非常低效的做法.
我们在生产环境下常常犯这样的错误,这个key是每次用来做Virtual DOM diff的,每一位同学都用序号
来更新的问题是它没有和同学的唯一信息相匹配,相当于用了一个随机键,那么无论有没有相同的项,
更新都会被渲染.
因此,对key有一个原则,那就是独一无二,且能不用遍历或随机值就不用,除非列表内容也并不是唯一的表示,
且没有可以相匹配的属性.

class Collections extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 1,
            array: [{
                sid: '1',
                name: 'aaa'
            }, {
                sid: '2',
                name: 'bbb'
            }, {
                sid: '3',
                name: 'ccc'
            }]
        }
    }

    render() {
        return (
            <div className="collections">
            {
                this.state.array.map((item, index) => {
                    return (
                        <div key={ item.sid }>{ item.name }</div>
                    )
                })
            }
            </div>
        );
    }
}

最后编辑于：2019.12.20 11:40:58