eact Hooks 之 useCallback、useMemo、memo基础使用

2021-01-28 17:02:39 阅读：211 来源： 互联网

标签：const useMemo Hooks memo useCallback props 组件

作用

都为性能优化，避免组件内的重复渲染次数。
某子组件只依赖了父组件内的方法，触发父组件内的方法时，会重复渲染子组件

const Child =(props) => {
  console.log(props, 'child-props');
  // 父组件触发setCount方法，就会打印props
  return (
    <div>
      <input type="text />
    </div>
  )
}


const Parent = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={setCount(count + 1)}></button>
      <Child />
    </div>
  )
}

export default () => {
    <div>
         <Parent />
    </div>
}

使用

memo

memo的使用对象为组件，且一般为某组件内的子组件，以上述代码为例，使用memo函数将Child包裹住，可以避免重复渲染

const Child = React.memo((props) => {
  console.log(props, 'child-props');
  // 父组件触发setCount方法，不会重复打印
  return (
    <div>
      <input type="text />
    </div>
  )
})

useCallback

memo缓存组件，useCallback缓存函数，若把上述代码改为下面这样，则还会重复打印，此时的优化需有memo和useCallback配合使用
child子组件只使用了父组件中的方法，且方法是不变的，input change时会调用父组件内的方法，handleChange方法会多次挂载

const Child = memo((props) => { // 使用memo包裹优化
  console.log(props, 'child-props');
  return (
    <div>
      <input type="text" onChange={props.onChange} />
    </div>
  )
})


const Parent = () => {
  const [text, setText] = useState('')
  // const hanleChange = (e) => {
  //  setText(e.target.value)
  // }
   // ⬇️优化写法
  const hanleChange = useCallback((e) => {
    setText(e.target.value)
  }, [])
  return (
    <div>
      <div>count: {text}</div>
      <Child onChange={hanleChange}  />
    </div>
  )
}

export default () => {
    <div>
         <Parent />
    </div>
}

useMemo

很多时候，我们需要在组件中计算数据，例如将数组组合到单个值，或者排序、过滤等。希望在其他状态发生变化时，不需要再重复 render。 useMemo 它与 useCallback 密切相关，但用于优化数据处理。它有相同的 API 来定义它所依赖的值。传入需要创建的函数和依赖项数组。 useMemo 只会在某个依赖项发生更改时重新计算 memoized 值。此优化有助于避免在每个渲染上进行高开销的计算，如果没有提供依赖项数组，那么 useMemo 将会在每次渲染时重新计算新的值

import { useMemo } from 'rax';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

标签：const,useMemo,Hooks,memo,useCallback,props,组件
来源： https://www.cnblogs.com/laine001/p/14340806.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

eact Hooks 之 useCallback、useMemo、memo基础使用

作用

使用

memo

useCallback

useMemo