React hooks：如何检测特定状态变量何时更新

Posted 2023-02-22

【中文标题】React hooks：如何检测特定状态变量何时更新

【英文标题】：React hooks: how to detect when particular state variable has updated [duplicate]

【发布时间】：2021-08-16 18:12:06

【问题描述】：

在 React 挂钩之前，我会使用 componentDidUpdate(prevProps, prevState)，如果我只想在 this.state.a 更新后执行给定的代码，我会这样做

if (prevState.a !== this.state.a) 
  <...>

如何在useEffect() 中实现相同的目标？

【问题讨论】：

我发现这个 amazing resouce 解释了 useEffect 钩子。似乎这里的其他人也可能错过了您想要与以前的值进行比较的部分。

【参考方案1】：

useEffect 函数采用一个依赖数组，您可以在其中提及要跟踪更改的状态。

useEffect(() => 
    //your code here
, [a])

【参考方案2】：

useEffect 将第二个参数称为依赖数组。您可以在此处传递您的状态，只要依赖数组中的值发生更改，就会执行此操作。

useEffect(() => 
   console.log('i get executed whenever a changes')
, [a]) 

【参考方案3】：

useEffect(() => 
//Your code
, [stateOne, stateTwo])

[stateOne, stateTwo] 表示如果内部定义的任何状态变量发生变化，useEffect 将运行。安装后也会第一次运行。

[] 表示只运行一次

它被称为useEffect的依赖数组。

【讨论】：

所以如果我有状态变量a、b和c，我可以为每个变量写一个useEffect？

是的。您可以拥有任意数量的。您可以在一个依赖数组中包含多个变量，因此如果其中任何一个发生更改，useEffect 将运行，或者您可以为变量设置单独的 useEffects。请注意，如果你的 useEffect 中有一个依赖数组，它仍然会在你的组件挂载时第一次运行。

【参考方案4】：

useEffect 采用第二个参数，称为依赖数组。您可以在此处传递您的状态变量，useEffect 将仅在该状态变量更改时执行回调函数。

const [a, setA] = useState(0);
useEffect(() => 
    //write you code here
, [a]);