高阶组件memo

父组件的 render 重新执行时，函数子组件的 render 函数也会调用。可以使用 memo 包裹一层。

问题代码：

父组件
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 from "react"
function ChildCpn() {
    console.log("子组件调用")
    return <div>子组件</div>
}
export default ChildCpn

父组件的值修改的时候，都会重新渲染子组件的 dom 树。

使用 memo，将函数组件放在 memo() 中，返回值是一个组件。

import React, { memo } from "react"
let ChildCpn = memo(
    function () {
        console.log("子组件调用")
        return <div>子组件</div>
    }
)
export default ChildCpn