大白话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]); // 依赖项数组包含 count
return (
<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>
<input
type="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;
在这个示例中，useMemo 缓存了 count * 2 的计算结果，useCallback 缓存了 increment 函数。
