如何在 React 中监听状态变化

React 1年前 116

使用 useEffect 钩子来监听 React 中的状态变化。我们可以将要跟踪的状态变量添加到挂钩的依赖项数组中，并且每次状态变量更改时都会运行 useEffect 钩子中的逻辑。

import {useEffect, useState} from 'react';

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

  useEffect(() => {
    console.log('useEffect ran. count is: ', count);
  }, [count]); // ?️ 添加要跟踪的状态变量

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

export default App;

我们传递给 useEffect 钩子的第二个参数是一个依赖数组。我们传递给钩子的函数将在任何依赖项之一发生更改时被调用。

如何在 React 中监听状态变化

我们将 count 状态变量添加到 hook 的依赖数组中，所以任何时候 count 发生变化，我们的 useEffect hook 中的逻辑都会重新运行。

将要跟踪的所有状态变量添加到 useEffect 钩子的依赖项数组中。

请注意，挂载组件时也会调用该钩子。

如果我们不想在初始渲染时运行 useEffect 钩子中的逻辑，但仅在特定状态变量更改时，请使用 ref 在初始渲染时提前返回。

import {useEffect, useRef, useState} from 'react';

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

  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return; // ?️ return early if first render
    }

    console.log('useEffect ran. count is: ', count);
  }, [count]); // ?️ 添加要跟踪的状态变量

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

export default App;

当在 mount 上运行 useEffect 钩子时，我们使用 ref 提前退出。

如何在 React 中监听状态变化

如果我们想监听状态更改但需要跳过第一次渲染，请使用此方法。

需要注意的是，如果你在 useEffect 钩子中更新了一个特定的状态变量，并且该变量存在于钩子的依赖数组中，你会导致一个无限的重新渲染循环。

这是一个演示此问题的示例。

import {useEffect, useState} from 'react';

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

  useEffect(() => {
    console.log('useEffect ran. count is: ', count);

    setCount(count + 1);  // ?️ 这会导致无限循环
  }, [count]);

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

export default App;