Day9:浅谈useCallback
「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。
Day9-今日话题
提到react项目中的性能优化，我们马上就能想到两个钩子：useMemo、useCallback。前一期文章已经简单聊过useMemo了，今天我们将从「用法」、「工作原理」、「作用」、「优缺点」、「使用场景」、「使用注意点」这六个角度来介绍useCallback
用法
useCallback 用于缓存一个函数，以便在组件重新渲染时避免不必要的函数创建和内存分配。它的基本用法如下：
const memoizedCallback = useCallback(
() => {
// 函数体
},
[dependencies]
);
useCallback 接受两个参数，第一个参数是要缓存的函数，第二个参数是一个依赖数组，只有当依赖数组中的值发生变化时，才会重新创建函数。如果依赖数组为空，函数将永远不会重新创建。
工作原理
useCallback 使用了 memoization 技术，它会在每次渲染时比较依赖数组中的值是否发生了变化。如果依赖数组中的值没有变化，它会返回上一次创建的函数引用，否则会创建一个新的函数。
作用
- 「性能优化」：避免不必要的函数重新创建，减少内存分配和提高组件性能。
- 「确保子组件的稳定性」：当将函数作为 prop 传递给子组件时，使用
useCallback可以确保子组件不会因为父组件的重新渲染而重新渲染，除非依赖数组中的值发生变化。
优缺点
「优点」：
- 提高性能：避免不必要的函数创建，特别在高频重新渲染的情况下可以显著提高性能。
- 保持稳定性：确保传递给子组件的函数不会随着父组件的重新渲染而改变，有助于避免不必要的子组件渲染。
「缺点」：
- 使用不当可能导致性能问题：如果依赖数组中的值过于频繁地变化，可能会导致函数频繁地重新创建，反而降低性能。
「使用场景」：
以下是一些常见的使用场景：
- 「传递回调函数给子组件」：
import React, { useCallback } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleClick = useCallback(() => {
// 处理点击事件
}, []);
return <ChildComponent onClick={handleClick} />;
}
在这个场景中，我们使用 useCallback 来确保 handleClick 函数不会因为 ParentComponent 的重新渲染而重新创建。这有助于优化 ChildComponent 的性能，因为它的 onClick 属性不会频繁地改变。
- 「在依赖数组中使用函数」：
import React, { useState, useCallback } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1); // 使用 count 作为依赖
}, [count]);
return (
<div>
<p>Count: {count}p>
<button onClick={increment}>Incrementbutton>
div>
);
}
在这里，我们使用 useCallback 来确保 increment 函数只有在 count 改变时才重新创建。这样可以避免因为 increment 的重新创建而导致不必要的重新渲染。
- 「自定义 Hook 中的使用」：
import { useState, useCallback } from 'react';
function useToggle(initialState) {
const [value, setValue] = useState(initialState);
const toggle = useCallback(() => {
setValue((prevValue) => !prevValue);
}, []);
return [value, toggle];
}
在自定义 Hook 中，我们使用 useCallback 来确保 toggle 函数在不同组件中使用时都具有相同的引用，并且不会因为组件重新渲染而改变。
- 「优化大型列表或表格」：
当你在渲染大型列表或表格时，可以使用 useCallback 来缓存行级别的事件处理函数，以减少不必要的函数创建。这可以显著提高性能，特别是在虚拟化列表等场景中。
使用注意点
- 不要滥用
useCallback。只有当性能问题明显时，或者需要确保回调函数的稳定性时才使用它。 - 注意依赖数组的配置。确保依赖数组中的值是唯一标识函数是否需要重新创建的关键因素。
- 将
useCallback用于传递给 DOM 事件处理程序时要小心，因为它可能导致事件处理程序不更新。
总之，useCallback 是 React 中用于性能优化的有效工具，可以帮助你避免不必要的函数创建和确保回调函数的稳定性。但要谨慎使用，仅在需要时使用，以免引入不必要的复杂性。
欢迎点赞、关注、转发～ 
本文由 mdnice 多平台发布