pureComponent

利用shouldComponentUpdate或者PureComponent来减少因父组件更新而触发子组件的render。

shouldComponentUpdate来决定是否组件是否重新渲染，如果不希望组件重新渲染，返回false即可。

PureComponet通过对props和state的浅比较结果来实现shouldComponentUpdate。但当对象包含复杂的数据结构时，可能对象深层的数据已改变却没有触发render。

---

class Child extends Component {

    render() {

        console.log('Child Render!');

        return (

            <div>

                hello Child!

            </div>

        );

    }

}

class Father extends Component {

    state = {

        count: 1

    }

    render() {

        console.log('Father Render!');

        return (

            <div>

                <div>count: {this.state.count}</div>

                <button onClick={() => this.setState((state) => ({count: state.count + 1}))}>up 1</button>

                <Child/>

            </div>

        );

    }

}

export default Father;

当点击按钮的时候，改变了父组件的state的值，父组件理所当然的会重新渲染，但是子组件并没有使用父组件的state的值，最后却也跟着重新渲染了

给Child组件改变shouldComponentUpdate生命周期。因为没有接受到父组件的props以及自身也没有state，所以直接返回false。如果shouldComponentUpdate返回false，那么就不会触发该组件的render渲染,所以我们可以自定义这个shouldComponentUpdate生命周期来控制组件是否渲染。

但是每次这样写着都很麻烦，于是PureComponent就出世了！PureComponent就用来解决子组件的不必要渲染问题

class Child extends PureComponent {

    render() {

        console.log('Child Render!');

        return (

            <div>

                hello Child!

            </div>

        );

    }

}

class Father extends Component {

    state = {

        count: 1

    }

    render() {

        console.log('Father Render!');

        return (

            <div>

                <div>count: {this.state.count}</div>

                <button onClick={() => this.setState((state) => ({count: state.count + 1}))}>up 1</button>

                <Child/>

            </div>

        );

    }

}

export default Father;

击按钮的时候，发现只有父组件渲染了，子组件没有渲染

---

PureComponent与memo的特点
1.浅对比

他们的对于props和state的比较是浅对比

浅对比：对象就对比他们的内存地址，只要内存地址一致，就不重新渲染，反之，对象的内存地址不一致，就渲染！

所以当面对修改对象数值的时候最好创建一个新对象重新赋值，这样能够起到渲染的作用！

2.memo里用了useState/useContext

memo对函数组件里面的useState/useContext是不起效的。

意思是context更新了，尽管用了memo，该函数组件依旧会重新渲染。

3.memo中的“shouldComponentUpdate”

首先，memo里是没有shouldComponentUpdate这个生命周期的，只是有一个类似的作用。

memo这个函数可以传递两个参数，一个是我们的组件，一个是类似shouldComponentUpdate这种判断是否渲染的方法。

memo(ChildComponent,()=>{...})

不过，值得注意的是，这个方法与shouldComponentUpdate相反：如果返回的是true，那么表示不重新渲染，如果返回的是false，那么要重新渲染。