探索 useEffect hook 多个依赖项的巧妙应用：避免代码臃肿，确保程序高效运行

2023-10-03 15:44:54

在 React 应用开发中，useEffect hook 是一个强大的工具，它可以让我们在组件生命周期的不同阶段执行一些副作用操作，比如发起网络请求、更新 DOM 等。然而，当我们需要在 useEffect 中处理多个依赖项时，就需要仔细考虑如何组织代码，以避免代码臃肿和性能问题。

巧妙应用 useEffect hook 处理多个依赖项

为了巧妙地处理 useEffect hook 中的多个依赖项，我们可以遵循以下原则：

避免在 useEffect 中直接使用 state

直接在 useEffect 中使用 state 会导致组件每次渲染时都会执行该 useEffect，这可能会造成不必要的性能开销。相反，我们应该将 state 的值传递给 useEffect 的依赖项数组，这样只有当 state 的值发生改变时，useEffect 才会执行。

例如，以下代码片段演示了如何避免在 useEffect 中直接使用 state：

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    // 不应该直接使用 state
    console.log(`Count: ${count}`);
  }, [count]);

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

export default MyComponent;

在上面的代码中，我们使用了 useState hook 来管理 count state，并在 useEffect 中将 count 传递给依赖项数组。这样，useEffect 只有在 count 的值发生改变时才会执行。

合理组织 useEffect 的依赖项数组

useEffect 的依赖项数组可以包含多个值，这些值可以是 state、props 或其他变量。当依赖项数组中的任何一个值发生改变时，useEffect 都会执行。因此，我们需要合理组织依赖项数组，以避免不必要的 useEffect 执行。

例如，以下代码片段演示了如何合理组织 useEffect 的依赖项数组：

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // 只在 count 发生改变时执行
    console.log(`Count: ${count}`);
  }, [count]);

  useEffect(() => {
    // 只在 todos 发生改变时执行
    console.log(`Todos: ${todos}`);
  }, [todos]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <span>{count}</span>
      <button onClick={() => setTodos([...todos, "New Todo"])}>Add Todo</button>
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们有两个 useEffect，分别监听 count 和 todos state 的变化。这样，当 count 或 todos 发生改变时，相应的 useEffect 才会执行。

使用 useCallback 或 useMemo 来优化依赖项数组

在某些情况下，useEffect 的依赖项数组可能会很长，这可能会影响代码的可读性和维护性。为了优化依赖项数组，我们可以使用 useCallback 或 useMemo hook。

useCallback 可以用来创建一个 memoized callback 函数，该函数只会在其依赖项发生改变时重新创建。例如，以下代码片段演示了如何使用 useCallback 来优化 useEffect 的依赖项数组：

import React, { useState, useEffect, useCallback } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const handleCountChange = useCallback(() => {
    console.log(`Count: ${count}`);
  }, [count]);

  const handleTodosChange = useCallback(() => {
    console.log(`Todos: ${todos}`);
  }, [todos]);

  useEffect(() => {
    // 只在 count 发生改变时执行
    handleCountChange();
  }, [count, handleCountChange]);

  useEffect(() => {
    // 只在 todos 发生改变时执行
    handleTodosChange();
  }, [todos, handleTodosChange]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <span>{count}</span>
      <button onClick={() => setTodos([...todos, "New Todo"])}>Add Todo</button>
    </div>
  );
};

export default MyComponent;

useMemo 可以用来创建一个 memoized 值，该值只会在其依赖项发生改变时重新计算。例如，以下代码片段演示了如何使用 useMemo 来优化 useEffect 的依赖项数组：

import React, { useState, useEffect, useMemo } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const todosCount = useMemo(() => {
    return todos.length;
  }, [todos]);

  useEffect(() => {
    // 只在 todosCount 发生改变时执行
    console.log(`Todos Count: ${todosCount}`);
  }, [todosCount]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <span>{count}</span>
      <button onClick={() => setTodos([...todos, "New Todo"])}>Add Todo</button>
    </div>
  );
};

export default MyComponent;