菜鸟教程
教程 react tutorial

useRef、useMemo、useCallback

在 React 中，useRef、useMemo 和 useCallback 是三种常见的性能优化 Hooks。它们有助于避免不必要的渲染和计算，从而提高应用的性能。

1. useRef

useRef 是 React 中的一个 Hook，用于持有对 DOM 元素或任何可变数据的引用。在组件渲染周期内，useRef 返回的对象的 .current 属性保持不变。常用于访问 DOM 元素、保持不需要重新渲染的变量。

jsx 
const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

`

2. useMemo

useMemo 是 React 中用于优化性能的 Hook。它会记住计算的结果，并且只有在依赖项发生变化时，才会重新计算。这可以防止昂贵的计算在每次渲染时都执行。

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

3. useCallback

useCallback 与 useMemo 类似，但它专门用于返回一个记忆化的函数，只有在依赖项变化时才会重新创建函数。它通常与子组件的 React.memo 配合使用，避免子组件不必要的重新渲染。

jsx 
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

这三者都用于优化性能，useRef 用于引用存储，useMemo 用于避免重复计算，useCallback 用于优化函数传递。正确使用它们能显著提高 React 应用的性能，尤其是在大型应用中。

相关内容