React中useEffect、useMemo 和 useCallback用法与区别useEffect 处理副作用，us

useEffect、useMemo 和 useCallback 用法总结

在 React 的函数组件中，useEffect、useMemo 和 useCallback 是常用的 Hooks，它们用于处理副作用、性能优化以及避免不必要的渲染或计算。

1. useEffect

作用：处理副作用，例如数据请求、订阅、手动操作 DOM 等。

参数：useEffect(setup, dependencies)有两个参数

setup：处理 Effect 的函数。setup 函数选择性返回一个 清理（cleanup） 函数。当组件被添加到 DOM 的时候，React 将运行 setup 函数。在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。在组件从 DOM 中移除后，React 将最后一次运行 cleanup 函数。
可选 dependencies：setup 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具配置了 React，那么它将验证是否每个响应式值都被正确地指定为一个依赖项。依赖项列表的元素数量必须是固定的，并且必须像 [dep1, dep2, dep3] 这样内联编写。React 将使用 Object.is 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行 Effect 函数。

react 组件中可以有多个 useEffect，他们可以分别处理不同的逻辑，例如：

发送请求的useEffect这种第二个参数通常为空数据，表示只在组件加载时请求；

数据变化时避免重复的渲染。

基本用法：

import { useEffect, useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`当前计数: ${count}`);
  }, [count]); // 依赖项数组，count 变化时触发

  return <button onClick={() => setCount(count + 1)}>点击 +1</button>;
};

常见模式：

不传依赖项：每次渲染都会执行

useEffect(() => {
  console.log("组件渲染");
});

传递空数组 []：仅在组件挂载和卸载时执行

useEffect(() => {
  console.log("组件挂载");

  return () => {
    console.log("组件卸载");
  };
}, []);

依赖项变化时执行

useEffect(() => {
  console.log("count 变化:", count);
}, [count]);

2. useMemo

作用：用于缓存计算结果，避免每次渲染都执行昂贵的计算。

参数：useMemo(calculateValue, dependencies)有两个参数

calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。
dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。如果你在代码检查工具中配置了 React，它将会确保每一个响应式数据都被正确地定义为依赖项。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用Object.is将每个依赖项与其之前的值进行比较。

基本用法：

缓存计算结果

import { useMemo, useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const expensiveCalculation = (num: number) => {
    console.log("执行计算...");
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <p>计算结果: {result}</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

缓存多类数据，优先展示某类数据

当组件中数据渲染使用result，根据count是否存在数据自动选择所展示的数据。

import { useState, useMemo } from "react";

const Example = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(5);

  const result = useMemo(() => {
    if (count) return count;
    return count1;
  }, [count, count1]);

  return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <button onClick={() => setCount1(count1 + 1)}>Increase count1</button>
    </div>
  );
};

适用场景：

• 避免昂贵计算重复执行

• 优化 React 组件的渲染性能

• 结合 useEffect 进行依赖优化

3. useCallback

作用：缓存函数的引用，避免子组件重复渲染或传递不必要的匿名函数。

基本用法：

import { useCallback, useState } from "react";

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("点击了按钮");
  }, []);

  return <button onClick={handleClick}>点击</button>;
};

适用场景：

• 优化子组件的渲染：当函数作为 props 传递给子组件时，避免子组件不必要的渲染

• 与 useMemo 结合使用：将 useCallback 生成的函数传递给 useMemo 依赖项，确保计算不重复执行

4. useMemo vs useCallback

• useMemo 返回的是缓存的计算结果

• useCallback 返回的是缓存的函数

例子：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

选择使用哪个 Hook

• 需要缓存计算结果 → useMemo

• 需要缓存函数 → useCallback

5. 什么时候使用这些 Hooks？

Hook	适用场景
useEffect	处理副作用，如数据请求、DOM 操作
useMemo	计算量较大的数据缓存，避免重复计算
useCallback	传递给子组件的函数，避免不必要的重新渲染

总结

• useEffect 主要用于副作用，如订阅、数据请求

• useMemo 用于缓存计算结果，提高性能

• useCallback 用于缓存函数，减少子组件重复渲染