React性能优化之memo、useMemo、useCallback

避免子组件不必要渲染

一、React.memo

阻止父组件渲染时该子组件重新渲染，只会在 props 或 state 变化时才改变 会对传入的 props 进行浅比较，对于引用类型，需要在父组件再加上使用 useCallBack 或 useMemo

// 子组件
export default React.memo(({contacts}) => {
  return <List data={contact}/>
})

二、React.useCallback

函数引用类型 会引起子组件渲染

const App = () => {
  /*
   const onClick = ()=> {
     console.log('click');
   }
  */

  const onClick = React.useCallback(()=> {
    console.log('click');
  })

  return (
    // 若不做缓存，每次传给子组件都是一个新的函数
    // <List onClick={()=>{onClick}} />
    
    <List onClick={onClick} />
  )
}

三、React.useMemo

对象引用类型 避免在每次渲染时都进行高开销的计算以及会引起子组件渲染

const App = ()=> {
  /*
   * 每次赋值对象给 data 时，data 被变为新的引用值，使得 props 发生变化，使得子组件重新渲染
   * const data = { test: '123' }
  */
  
  // 使用 Rect.useMemo 记忆变量
  const data = React.useMemo(()=>{
    test: '123'
  }, [])
  
  return (
    <div>
      <List data = {data} />
    </div>
  )
}