React - PureComponent 会自动比较props的变化， 决定是否更新

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'

const root = ReactDOM.createRoot(document.getElementById('root'))

// PureComponent内部实现了shouldComponentUpdate， 会自动比较props的变化， 决定是否更新
class MyApp01 extends React.Component {
  state = {
    count: 101,
    msg: 'Hello React, we are the world!',
    list: [],
  }

  render() {
    const { count, msg, list } = this.state
    return (
      <>
        <div>
          <h1>count: {count}</h1>
          <h2>msg: {msg}</h2>
          <h2>list: {list}</h2>
          <button
            onClick={() =>
              this.setState({
                count: count + 1,
              })
            }
          >
            点击修改count
          </button>

          <button
            onClick={() =>
              this.setState({
                msg: msg + '~~',
              })
            }
          >
            点我修改msg
          </button>

          <button
            onClick={() =>
              this.setState({
                list: [...list, 1],
              })
            }
          >
            点我修改list
          </button>
          <ChildCom count={count} msg={msg}></ChildCom>
        </div>
      </>
    )
  }
}

// // PureComponent内部实现了shouldComponentUpdate， 会自动比较props的变化， 决定是否更新
class ChildCom extends React.PureComponent {
  render() {
    const { count, msg } = this.props
    return (
      <>
        <div>
          Child - count: {count} msg: {msg}
        </div>
      </>
    )
  }

  componentDidUpdate() {
    console.log('检测到所以来的父组件数据发生更新了....')
  }
}
const divNode = (
  <div>
    <MyApp01 />
  </div>
)
root.render(divNode)