react监听数据变化

在 React 中，可以使用 `useState` Hook 或 `useReducer` Hook 来管理组件的状态。当组件的状态发生变化时，React 会重新渲染组件并更新视图。

如果想要在组件中监听状态的变化，可以使用 `useEffect` Hook。在 `useEffect` 中可以编写监听状态变化的代码，当状态发生变化时，就会触发监听函数。

例如，假设有一个状态 `count`，我们想要在其值发生变化时打印出新的值：

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

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

  useEffect(() => {
    console.log('count has changed:', count);
  }, [count]);

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

在上面的代码中，我们使用了 `useEffect` Hook 来监听 `count` 的变化。在 useEffect 的第二个参数中传入 `[count]`，这样就只会在 `count` 发生变化时触发监听函数。