React Hooks - 即使状态没有改变，useEffect 也会触发
在 React 中，Hooks 是一种用于函数组件的特殊功能，它们使我们能够在不使用类组件的情况下使用状态和其他 React 功能。其中一个最常用的 Hook 是 useEffect，它允许我们在组件渲染后执行副作用操作。但是，有一个令人困惑的问题是，即使状态没有改变，useEffect 也会触发。在本文中，我们将探讨这个问题，并提供一个案例代码来解释这个现象。为什么 useEffect 会触发？在理解为什么 useEffect 会在没有状态改变时触发之前，让我们先了解一下 useEffect 的工作原理。useEffect 接受一个函数作为参数，这个函数会在组件渲染后执行。它还可以接受一个可选的依赖数组，用于指定在依赖项发生变化时才触发 useEffect。如果没有指定依赖项数组，那么 useEffect 将在每次组件渲染后都触发。这就意味着，无论状态是否改变，都会执行 useEffect 中的代码。这可能是我们在没有意识到的情况下产生的 bug 的原因之一。案例代码让我们通过一个案例代码来演示这个现象。假设我们有一个计数器组件，用户可以通过点击按钮来增加计数器的值。我们希望在计数器值改变时显示一个提示信息。javascriptimport React, { useState, useEffect } from "react";const Counter = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("Count has changed!"); }, []); const increment = () => { setCount(count + 1); }; return ( {count}
);};export default Counter;在上面的代码中，我们使用了 useState Hook 来定义一个名为 count 的状态变量，并使用 useEffect Hook 来打印出提示信息。在 useEffect 的依赖项数组中，我们传递了一个空数组，这意味着 useEffect 只会在组件首次渲染时触发。为什么 useEffect 在状态没有改变时触发？现在让我们来解释一下为什么在这种情况下 useEffect 会触发。在我们的例子中，我们传递了一个空数组作为 useEffect 的依赖项。这意味着 useEffect 不依赖于任何状态变量，因此它只会在组件首次渲染时触发。然而，每当我们调用 setCount 来更新计数器的值时，React 将会重新渲染组件。虽然 count 的值没有改变，但是由于组件重新渲染，useEffect 也会再次触发。如何避免 useEffect 不必要的触发？如果我们希望 useEffect 只在特定的状态变量改变时触发，我们可以将这些变量添加到依赖项数组中。在我们的示例中，我们可以将 count 添加到依赖项数组中，如下所示：javascriptuseEffect(() => { console.log("Count has changed!");}, [count]);这样，只有当 count 发生变化时，useEffect 才会触发。在本文中，我们讨论了当状态没有改变时，为什么 useEffect 仍然会触发的问题。我们通过一个案例代码演示了这个现象，并提供了解决这个问题的方法。通过将相关的状态变量添加到 useEffect 的依赖项数组中，我们可以确保 useEffect 只在需要时触发。这将帮助我们避免不必要的副作用操作，提高应用程序的性能和可维护性。