React.memo总结

此方法是一个React顶层Api方法，给函数组件来减少重复渲染，类似于PureComponent父和shouldComponentUpdate方法的集合体。

memo它是专门给函数组件用来减少子孙组件的非必要渲染

它是一个高阶组件

React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件，当它的父组件重新渲染时，只要它的新 props 与旧 props 相同时，React 就不会重新渲染它。这样的组件被称为 记忆化的（memoized）组件。

此写法和类组件中的PureComponent功能是一样的
const Child = memo(({ num }) => {
  //此时child只会打印一次，因为子组件中没有使用来自父组件中所传的值
  //若父组件中向子组件传入数据，并且在子组件中使用了数据，则会在每次调用addNum时都打印child
  console.log('child')
  return (
    <div>
      <div>child组件</div>
    </div>
  )
})

const App = () => {
  const [num, setNum] = useState(1)
  const addNum = () => {
    setNum(v => v + 1)
  }
  return (
    <div>
      <h3>{num}</h3>
      <button onClick={addNum}>++++++</button>
      <hr />
      <Child />
    </div>
  )
}

----------------------------------------------------------------------
const Child = memo(
  ({ num }) => {
    console.log('child')
    return (
      <div>
        <div>child组件 - {num.value}</div>
      </div>
    )
  },
  // 回调函数的功能就相当于类组件中的shouldComponentUpdate作用
  // prevProps修改前的props数据
  // nextProps修改后的props数据
  (prevProps, nextProps) => {
    // console.log(prevProps, nextProps)
    //如果要阻止渲染则返回true,继续渲染返回false
    return isEqual(prevProps, nextProps)
    //若两次值相等，则返回true，因此不会继续渲染，每次只打印app，不打印child
    //若两次值相等，则返回false，因此会继续渲染，每次同时打印app和child
  }
)

const App = () => {
  const [num, setNum] = useState({ value: 1 })
  console.log('app')
  const addNum = () => {
    setNum({ value: Date.now() })
  }

  return (
    <div>
      <h3>{num.value}</h3>
      <button onClick={addNum}>++++++</button>
      <hr />
      <Child num={num} />
    </div>
  )
}