当前位置：首页 > news >正文

React 中useMemo和useCallback Hook 的作用，在什么场景下使用它们？

news 2025/3/26 8:12:32

大白话React 中useMemo和useCallback Hook 的作用，在什么场景下使用它们？

在 React 里，useMemo 和 useCallback 这两个 Hook 可有用啦，能帮咱优化组件性能，避免不必要的计算和渲染。下面咱就来详细聊聊它们的作用和使用场景。

useMemo

useMemo 就像是一个缓存小能手，它会记住某个计算结果，下次再遇到相同的输入时，就直接拿出之前算好的结果，而不用重新计算，这样能节省不少性能。

咱来看个简单的例子：

import React, { useMemo, useState } from 'react';// 定义一个组件
const ExampleComponent = () => {// 定义一个状态，用于控制是否更新const [count, setCount] = useState(0);// 使用 useMemo 来缓存一个复杂计算的结果const expensiveValue = useMemo(() => {// 模拟一个复杂的计算console.log('进行复杂计算...');let sum = 0;for (let i = 0; i < 1000000; i++) {sum += i;}return sum;}, []); // 依赖项数组为空，意味着只计算一次return (<div><p>计数: {count}</p>{/* 显示复杂计算的结果 */}<p>复杂计算结果: {expensiveValue}</p><button onClick={() => setCount(count + 1)}>增加计数</button></div>);
};export default ExampleComponent;

代码解释：

useMemo 接收两个参数，第一个参数是一个函数，这个函数里放着要进行的复杂计算；第二个参数是一个依赖项数组。
当依赖项数组为空时，useMemo 里的函数只会在组件第一次渲染时执行，之后就直接用缓存的结果。
要是依赖项数组里有值，那只要这些值有变化，useMemo 里的函数就会重新执行。

使用场景：

当有复杂的计算，而且这个计算的输入在一段时间内不会变时，就可以用 useMemo 把结果缓存起来，避免每次渲染都重新计算。
当传递给子组件的对象或数组，每次渲染时引用都不同，导致子组件不必要的重新渲染时，也可以用 useMemo 来保持引用不变。

useCallback

useCallback 和 useMemo 有点像，但它主要是用来缓存函数的。在 React 里，每次组件重新渲染时，函数都会重新创建，这可能会导致一些问题，比如子组件不必要的重新渲染。useCallback 就能解决这个问题，它会记住函数的引用，只要依赖项不变，函数的引用就不会变。

看个例子：

import React, { useCallback, useState } from 'react';// 定义一个子组件
const ChildComponent = ({ onClick }) => {console.log('子组件渲染');return (<button onClick={onClick}>点击我</button>);
};// 定义一个父组件
const ParentComponent = () => {// 定义一个状态，用于控制是否更新const [count, setCount] = useState(0);// 使用 useCallback 来缓存一个函数const handleClick = useCallback(() => {console.log('按钮被点击了');setCount(count + 1);}, [count]); // 依赖项数组包含 countreturn (<div><p>计数: {count}</p>{/* 传递缓存的函数给子组件 */}<ChildComponent onClick={handleClick} /></div>);
};export default ParentComponent;

代码解释：

useCallback 也接收两个参数，第一个参数是要缓存的函数，第二个参数是依赖项数组。
只要依赖项数组里的值不变，useCallback 返回的函数引用就不会变。

使用场景：

当把函数作为 props 传递给子组件时，用 useCallback 可以避免子组件因为函数引用的变化而不必要的重新渲染。
当函数是作为依赖项传递给其他 Hook（比如 useEffect）时，用 useCallback 可以保证函数引用的稳定性。

总的来说，useMemo 主要用于缓存计算结果，useCallback 主要用于缓存函数，合理使用它们能让 React 应用的性能更上一层楼！

除了性能优化，useMemo和useCallback还有哪些应用场景？

除了性能优化外，useMemo 和 useCallback 在 React 开发中还有其他一些实用的应用场景，下面分别介绍：

useMemo 的其他应用场景

1. 确保对象引用的一致性

在 React 中，有些组件可能依赖于某个对象，如果每次渲染时该对象的引用都发生变化，可能会导致不必要的重新渲染。使用 useMemo 可以确保对象引用的一致性，只有当依赖项发生变化时，对象才会被重新创建。

import React, { useMemo, useState } from 'react';const Example = () => {const [count, setCount] = useState(0);// 使用 useMemo 确保 options 对象引用的一致性const options = useMemo(() => ({label: '选项',value: count}), [count]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};export default Example;

2. 条件渲染中的计算

当需要根据某些条件进行复杂的计算以决定是否渲染某个组件时，useMemo 可以帮助缓存计算结果，避免每次渲染都进行重复计算。

import React, { useMemo, useState } from 'react';const Example = () => {const [isLargeNumber, setIsLargeNumber] = useState(false);const [number, setNumber] = useState(0);// 使用 useMemo 缓存计算结果const shouldShowMessage = useMemo(() => {return number > 100;}, [number]);return (<div><inputtype="number"value={number}onChange={(e) => setNumber(Number(e.target.value))}/>{shouldShowMessage && <p>数字大于 100</p>}</div>);
};export default Example;

useCallback 的其他应用场景

1. 事件处理函数的传递

在高阶组件或自定义 Hook 中，当需要将事件处理函数作为参数传递时，使用 useCallback 可以确保传递的函数引用保持不变，避免不必要的重新渲染。

import React, { useCallback, useState } from 'react';// 自定义 Hook
const useCounter = () => {const [count, setCount] = useState(0);// 使用 useCallback 缓存 increment 函数const increment = useCallback(() => {setCount(count + 1);}, [count]);return { count, increment };
};const Example = () => {const { count, increment } = useCounter();return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
};export default Example;

2. 避免无限循环

在某些情况下，如果不使用 useCallback，可能会导致无限循环。例如，在 useEffect 中依赖一个函数，如果该函数每次渲染都重新创建，就会触发 useEffect 不断执行。使用 useCallback 可以避免这种情况。

import React, { useCallback, useEffect, useState } from 'react';const Example = () => {const [count, setCount] = useState(0);// 使用 useCallback 缓存函数const fetchData = useCallback(() => {// 模拟数据获取console.log('Fetching data...');}, []);useEffect(() => {fetchData();}, [fetchData]);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};export default Example;

这些场景展示了 useMemo 和 useCallback 在除性能优化之外的其他用途，它们可以帮助开发者更好地管理组件的状态和行为。

React 中useMemo和useCallback Hook 的优缺点以及区别？

优点

useMemo

性能优化：能对复杂计算结果进行缓存，避免每次渲染都重新计算。比如在处理大数据集的排序、过滤等复杂操作时，使用 useMemo 可显著提升性能。
稳定引用：保证对象、数组等引用类型在依赖项未改变时引用不变，避免因引用变化导致子组件不必要的重新渲染。

useCallback

性能优化：缓存函数，避免函数在每次渲染时重新创建，从而减少不必要的内存分配和垃圾回收，优化性能。
稳定函数引用：当把函数作为 props 传递给子组件时，使用 useCallback 可保证函数引用稳定，防止子组件因函数引用变化而重新渲染。

缺点

useMemo

增加内存开销：由于需要缓存计算结果，会占用一定的内存空间。如果缓存的数据量较大，可能会对内存造成压力。
过度使用导致代码复杂：若过度使用 useMemo，会使代码逻辑变得复杂，增加维护难度。而且不合理地设置依赖项，可能会导致缓存结果不准确。

useCallback

增加复杂性：和 useMemo 类似，过度使用会让代码逻辑变得复杂，尤其是依赖项较多时，难以理解和维护。
依赖项管理困难：需要正确设置依赖项，若依赖项设置不当，可能导致函数不能及时更新，出现逻辑错误。

区别

功能用途

useMemo：主要用于缓存计算结果，返回的是计算结果的值。适合缓存复杂计算、数据转换等操作的结果。
useCallback：主要用于缓存函数，返回的是一个函数。常用于将函数作为 props 传递给子组件，确保函数引用的稳定性。

语法形式

useMemo：接收两个参数，第一个参数是一个函数，该函数返回需要缓存的值；第二个参数是一个依赖项数组。示例如下：

const memoizedValue = useMemo(() => {// 进行复杂计算return someComputation();
}, [dependency1, dependency2]);

useCallback：同样接收两个参数，第一个参数是要缓存的函数，第二个参数是依赖项数组。示例如下：

const memoizedCallback = useCallback(() => {// 函数逻辑doSomething();
}, [dependency1, dependency2]);

返回值

useMemo：返回的是第一个参数函数的返回值。
useCallback：返回的是第一个参数传入的函数本身。

通过下面的示例能更直观地看出它们的区别：

import React, { useMemo, useCallback, useState } from 'react';const ParentComponent = () => {const [count, setCount] = useState(0);// 使用 useMemo 缓存计算结果const memoizedValue = useMemo(() => {console.log('Calculating memoized value...');return count * 2;}, [count]);// 使用 useCallback 缓存函数const memoizedCallback = useCallback(() => {console.log('Button clicked!');setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><p>Memoized Value: {memoizedValue}</p><button onClick={memoizedCallback}>Increment</button></div>);
};export default ParentComponent;