2018-04-25 react优化

React性能优化

由于React使用的虚拟DOM在其节点发生变化时,React会使用Diff算法对前后的虚拟DOM树进行对比,一旦发现不同,虚拟DOM树就会从根结点进行重新刷新,而浏览器进行实际操作DOM的仅仅是diff的部分,尽管每次虚拟DOM都会从根结点进行重新刷新,但是由于javascript是存储在内存中,所以性能很高,但是每一次都会从虚拟DOM的根结点进行重新刷新,会造成一些无谓的虚拟DOM树的重新刷新,比如父组件的虚拟DOM节点修改发生了变化,虚拟DOM节点根据diff算法进行对比之后,就会从虚拟DOM根结点进行重新刷新,但是其子组件并没有发生虚拟DOM的修改,这是子组件也会跟着父组件一起进行虚拟DOM树的diff算法对比和虚拟DOM节点的重新刷新,也耗费了比较多的时间。为了避免无谓的虚拟DOM树diff算法对比和虚拟DOM根结点的重新刷新,React给开发者提供了shouldComponentUpdate进行判断,shouldComponentUpdate是运行在虚拟DOM树diff算法对比和虚拟DOM树根结点重新渲染之前的,假如返回true就说明,数据发生了变化,需要进行虚拟DOM树diff算法对比以及虚拟DOM根结点的重新刷新,否则就返回false,不执行虚拟DOM树diff算法对比以及虚拟DOM根结点的重新刷新。

避免无谓的虚拟DOM树重新刷新

假如有一个组件仅仅渲染一个字符串,利用shouldComponentUpdate进行判断,避免无谓的虚拟DOM树重新刷新

class TextView extends React.Component{
    static propTypes = {
        value: PropTypes.string.isRequired
    };

    constructor(props){
        super(props);
        this.state = {
        };
    }

    shouldComponentUpdate(nextProps, nextState){
        return this.props.value !== nextProps.value;
    }

    render(){
        let {value} = this.props;
        return (
            <h1>
                {value}
            </h1>
        )
    }
}