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

Question

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

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

我怎样才能实现同样的目标useEffect()？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

[] 表示只运行一次

它被称为 useEffect 的依赖数组。

Answer 4

useEffect接受第二个参数，称为依赖数组。您可以在此处传递您的状态变量，并且useEffect仅当该状态变量更改时才会执行回调函数。

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