React的memo与useMemo及useCallback

React.memo

• 概念解析
  • 将组件在相同的情况下的渲染结果，缓存渲染结果
  • 当组件传入props相同的参数时，浅对比之后有之前的传入项，则复用缓存最近一次结果
  • 数据对比，只做浅对比。如果需要控制对比过程，需要自己写自定义比对函数。传参数置第二个参数 -请注意不要与 shouldComponetUpdate 返回值混合

类组件通过比对数据，可以控制渲染的方式？

• React.PureComponent
• shouldComponentUpdate

hooks的useMemo

• 概念解析
  • 函数组件的缓存渲染结果
  • 可以将当前的组件节点颗粒化
  • 通过第二个参数去判断，是否更新useMemo的回调函数
  • 回调函数是一个必包，如果创建使用了 useState，会缓存 state 值，不会拿到实时更新的值

hooks的useCallback

• 概念解析
  • 返回一个需要缓存的函数
  • 传递需要更新的依赖项，一般回调函数内部使用的数据，都需要添加在依赖项中
  • 避免父子之间，子级生成新的props函数，从而刷新子组件
    • 当父级组件传递给子级组件一个函数时，无状态组件每次都会重新生成新的props函数，导致子组件刷新
  • 一般联合useMemo一起使用