useCallback 与 useMemo

最新推荐文章于 2024-07-24 08:04:56 发布

rugu-sco

最新推荐文章于 2024-07-24 08:04:56 发布

阅读量469

点赞数

分类专栏：前端文章标签： react.js hooks

本文链接：https://blog.csdn.net/sinat_36629696/article/details/120088429

版权

本文详细介绍了React Hooks中的useCallback和useMemo。useCallback用于优化性能，当依赖项未变时返回缓存的回调函数，避免子组件不必要的渲染。而useMemo则用于创建缓存的值，当依赖项改变时才会更新，同样用于提高性能。通过实例代码展示了它们在实际应用中的用法。

摘要由CSDN通过智能技术生成

useCallback 与 useMemo

useCallBack

参数：

一个内联回调函数
依赖项数组

返回值：

该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了）

只有当依赖项发生改变时，这个回调函数才会重新生成。

使用场景举例：

如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memoized 版本的函数是不变的，因此传给子组件的函数也是不变的，子组件就不会重新渲染。

function SubCounter({
     onClick, data }) {
   
  return <button onClick={
   onClick}>{
   data}</button>;
}

const MemoSubCounter = React.memo(SubCounter);
let oldData, oldAddClick;

function Counter1() {
   
  console.log("Counter1 render");
  const [name, setName] = useState("计数器");
  const