SCU & PureComponent

遇到的问题：

        React 在 props 或 state 发生改变时，会调用 React 的 render 方法，会创建一颗不同的树。当一个组件的 render 函数调用时，子组件会重新渲染，子组件的 render 方法也会被调用，而子组件的 state 可能并没有改变过。依次推理，所有的组件都需要重新 render，进行 diff 算法， 性能必然是很低的。调用 render 应该有一个前提，就是依赖的数据(state、props)发生改变时，再调用自己的 render 方法。

如何来控制render方法是否被调用呢?

shouldComponentUpdate

这是一个生命周期函数，在 render 函数执行之前调用。在这个生命周期函数中返回 false，就不会调用 render 函数，返回 true 的时候，调用 render 函数。

shouldComponentUpdate 有两个参数 nextProps (修改之后，最新的 props 属性)、nextState (修改之后，最新的 state 属性)

  shouldComponentUpdate(prevProps, prevState) {
    return prevProps.message !== this.props.message
  }

这样就可以防止父组件调用 render 函数，子组件也跟着调用 render 函数，提高了性能。但是也会产生一个问题： 如果所有的类都需要手动实现 shouldComponentUpdate ，就会增加开发量，类组件继承 PureComponent 之后，默认实现了 shouldComponentUpdate ，就不需要手动写了。

父组件：

import React from "react"
import ChildCpn from "./cpn.js"
class App extends React.Component {
  state = {
    age: 18
  }
  add = () => {
    this.setState({
      age: this.state.age + 1
    })
  }
  render() {
    return (
      <div>
        <span>显示值:{this.state.age}</span>
        <button onClick={this.add}>点击</button>
        <ChildCpn />
      </div>
    )
  }
}
export default App

子组件：

import React, { PureComponent } from "react"
class ChildCpn extends PureComponent {
    render() {
        console.log("子组件render")
        return <div>子组件</div>
    }
}
export default ChildCpn

当父组件的值发生改变之后，字组件不会再调用 render 函数了。 

类组件中可以使用 PureComponent，函数组件需要 高阶组件memo