Component VS PureComponent

Posted 2020-11-27 zouyanzhi

 Component VS PureComponent

import React from ‘react‘;

import PropTypes from ‘prop-types‘;

export default class Button extends React.Component {

    static propTypes = {

        text: PropTypes.string.isRequired

    }

    static defaultProps = {

        text: ‘Click me‘

    }

    constructor(props) {

        super(props);

        this.state = { count: props.count };

        this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {

        //do something

    }

    shouldComponentUpdate(nextProps, nextState) {

        if (this.props.text !== nextProps.text) {

            return true;

        }

        if (this.state.count !== nextState.count) {

            return true;

        }

        return false;

    }

    render() {

        const { text } = this.props;

        return <button type="button" onClick={this.handleClick}>

            {text}

        </button>

    }

}

当组件的props或者state发生变化的时候，React会对组件当前的Props和State分别与nextProps和nextState进行比较，如果有变化，当前组件及其子组件就会重新渲染。

为了避免不必要的重新渲染，我们通过实现shouldComponentUpdate来优化性能(详见黄色高亮部分)(只在需要的时候进行更新)。

针对以上需求，React提供了PureComponent来自动帮我们实现以上需求，这样可以简化代码，提高性能。但是PureComponent中自动实现的shouldComponentUpdate只是对props和state进行了浅比较，所以当props和state是嵌套对象/数组等复杂类型时，达不到预期的效果。example：

this.state = { arr: ["Hello"] };

handleClick(){
    const tempArr = this.state.arr;
    tempArr.push("World");
    this.setState({ arr: tempArr })
}

arr中新增了元素，但是由于state只进行了浅比较，this.state.arr与nextState.arr指向的仍是同一个数组，组件不会进行重新渲染。

解决办法：生成一个新的数组赋值给state.arr即可。