Hooks 无参数依赖是安全的吗？

2023-10-06 07:28:27

概述

在 React 中，Hooks 是一个强大的特性，它允许我们在函数组件中使用状态和生命周期方法。其中，useEffect 是一个非常重要的 Hook，它允许我们在组件挂载、更新和卸载时执行某些操作。

在使用 useEffect 时，我们需要指定一个依赖列表。这个列表包含了 useEffect 中使用的所有状态和 props。当这些状态或 props 发生变化时，useEffect 将会再次执行。

省略函数是否安全？

一般来说，在依赖列表中省略函数是不安全的。这是因为，外部函数可能使用了 state 或 props，而如果我们在 useEffect 中省略了函数，那么 effect 中就很难知道外部函数使用了哪些 state 和 props。

例如，考虑以下代码：

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

  const handleClick = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log(`Count is ${count}`);
  });

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
};

在这个例子中，我们有一个按钮，点击按钮会将 count 状态增加 1。我们还使用了一个 useEffect Hook，在每次 count 状态改变时都会输出一条日志。

但是，如果我们在 useEffect 中省略了 handleClick 函数，那么代码就会变成这样：

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

  const handleClick = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log(`Count is ${count}`);
  }, []);

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
};

现在，useEffect Hook 的依赖列表为空。这意味着，无论 count 状态是否发生变化，useEffect 都会在每次组件渲染时执行。这显然不是我们想要的结果。

最佳实践

为了避免出现这种情况，我们应该始终在依赖列表中包含所有在 useEffect 中使用的函数。这样，useEffect 就可以知道哪些状态和 props 发生了变化，并只在这些状态或 props 发生变化时执行。

例如，对于上面的例子，我们应该将 handleClick 函数添加到依赖列表中，代码如下：

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

  const handleClick = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log(`Count is ${count}`);
  }, [count, handleClick]);

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
};