React组件性能优化

纯函数

1.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>
        );
    }
}