实现方式一：shouldComponentUpdate

注：

shouldComponentUpdate会在render生命周期前执行，

必须返回一个布尔值，返回true更新，返回false不更新,

有两个参数，弟一个参数是最新的props弟二个是最新的state

代码：

import React from react;
import ReactDOM from react-dom/client;

class Demo extends React.Component {
  state = {
    num: 1
  }
  render() {
    return (
      <div>
        <h1>随机数</h1>
        <button onClick={this.handlerClick} >随机</button>
        <Children num={this.state.num}></Children>
      </div>

    )
  }
  handlerClick = () => {
    this.setState({ num: parseInt(Math.random() * 3) })
  }
}

class Children extends React.Component {
  shouldComponentUpdate(newProps,newState){
    // shouldComponentUpdate必须返回一个布尔值，返回true更新，返回false不更新,有两个参数，弟一个参数是最新的props弟二个是最新的state
    console.log("更新前",newProps,this.props.num);
    return newProps.num !== this.props.num
  }
  render() {
    console.log("更新了");
    return (
      <div>
        <div>{this.props.num}</div>
      </div>

    )
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(<Demo />)

实现方式二：PureComponent

注：

PureComponent是一个纯组件，它内部自行执行了state和props的对比，来确定要不要更新

它的对比的浅对比，对象是地址，不发生改变就不会更新，所以在更改state中的对象时，可以{...}深克隆，然后在更改

代码：

import React from react;
import ReactDOM from react-dom/client;

class Demo extends React.Component {
  state = {
    num: 1
  }
  render() {
    return (
      <div>
        <h1>随机数</h1>
        <button onClick={this.handlerClick} >随机</button>
        <Children num={this.state.num}></Children>
      </div>

    )
  }
  handlerClick = () => {
    this.setState({ num: parseInt(Math.random() * 3) })
  }
}

class Children extends React.PureComponent {
  
  render() {
    console.log("更新了");
    return (
      <div>
        <div>{this.props.num}</div>
      </div>

    )
  }
}

ReactDOM.createRoot(document.getElementById("root")).render(<Demo />)