React 函数式组件优化（续）
2023-10-24 13:47:56
在上一篇文章《React 函数式组件优化》中，我们提到可以使用 useCallback 来将函数记忆化，从而达到每次传给子组件的都是同一个函数，避免子组件函数重复执行，提升性能。除了使用 useCallback 之外，针对函数的记忆化，还可以使用 useMemo。
在实际的工作中，我经常会碰到这样的场景：父组件需要将一个函数传递给子组件，而这个函数依赖于父组件的状态。当父组件的状态发生变化时，子组件的函数也会发生变化。如果我们不进行任何优化，那么每次父组件的状态发生变化时，子组件的函数都会重新执行一次。这可能会导致性能问题，尤其是在子组件的函数很复杂或者被频繁调用时。
为了解决这个问题，我们可以使用 useMemo。useMemo 函数接受两个参数：一个函数和一个依赖项数组。useMemo 会在组件第一次渲染时调用该函数，并将结果存储起来。在随后的渲染中，如果依赖项数组没有发生变化，useMemo 会直接返回存储的结果，而不会重新调用该函数。
举个例子，假设我们有一个父组件，该组件包含一个状态变量 count。父组件需要将一个函数传递给子组件，该函数的作用是将 count 加一。我们可以使用 useMemo 来优化这个函数，如下所示：
const ParentComponent = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<ChildComponent incrementCount={useMemo(() => incrementCount, [count])} />
</div>
);
};
const ChildComponent = ({ incrementCount }) => {
return (
<button onClick={incrementCount}>Increment count</button>
);
};
通过使用 useMemo，我们确保了只有当 count 发生变化时，incrementCount 函数才会重新执行。这样可以有效地避免子组件函数的重复执行，从而提升性能。
当然，useCallback 和 useMemo 都不是万能的。在使用它们之前，我们应该考虑以下几点：
- 只有在函数确实需要记忆化时才使用 useCallback 或 useMemo。如果函数不依赖于任何状态或者很少被调用，那么使用 useCallback 或 useMemo 反而会降低性能。
- useCallback 和 useMemo 都会在组件第一次渲染时执行函数。因此，如果函数的执行成本很高，那么可能会导致组件渲染变慢。
- useCallback 和 useMemo 都使用闭包来存储函数的结果。因此，如果函数中使用了外部变量，那么这些变量也会被闭包捕获。这可能会导致内存泄漏。
总的来说，useCallback 和 useMemo 是非常有用的工具，可以帮助我们优化 React 函数式组件的性能。但是，在使用它们之前，我们应该仔细考虑是否真的需要使用它们。
