解密 React 源代码之奥秘：深入剖析 useCallback 和 useMemo

2024-02-07 18:10:16

优化 React 组件性能：使用 useCallback 和 useMemo

在 React 开发中，组件的重新渲染是一个不可避免的过程。然而，并不是所有的组件都需要在每次状态改变时都进行重新渲染。为了提升性能，React 提供了两个强大的函数：useCallback 和 useMemo，帮助开发者优化组件的渲染行为。

useCallback：缓存函数

useCallback 允许开发者缓存函数。在组件重新渲染时，如果函数的依赖项（作为第二个参数传入）没有改变，那么缓存的函数将被直接使用，而无需重新创建。这可以极大地减少函数的调用次数，从而提升组件性能。

何时使用 useCallback？

useCallback 适用于以下场景：

频繁调用的函数，如事件处理程序
依赖于不可变状态的函数
当函数的创建或重新创建代价高昂时

代码示例：

import React, { useCallback } from 'react';

const MyComponent = () => {
  const handleInputChange = useCallback(() => {
    // 处理用户输入
  }, []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
};

在上面的示例中，handleInputChange 函数被缓存，只有当组件重新渲染时才会重新创建，这在处理用户输入的情况下非常有用。

useMemo：缓存值

useMemo 用于缓存值。当组件重新渲染时，如果值的依赖项（作为第二个参数传入）没有改变，那么缓存的值将被直接使用，而无需重新计算。这可以显著减少值的计算次数，从而提高组件性能。

何时使用 useMemo？

useMemo 适用于以下场景：

昂贵的计算或操作
依赖于不可变状态的值
当值在多个地方被使用时

代码示例：

import React, { useMemo } from 'react';

const MyComponent = () => {
  const value = useMemo(() => {
    // 计算值
  }, []);

  return (
    <div>{value}</div>
  );
};