React的memo与useMemo及useCallback

510 阅读1分钟

React.memo

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

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

  • React.PureComponent
  • shouldComponentUpdate

hooks的useMemo

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

hooks的useCallback

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