react 监听数据变化调用函数

在React中，可以使用`useState`或`useReducer`来定义状态。如果要监听数据的变化并调用函数，可以使用`useEffect`来实现。`useEffect`接受两个参数：第一个参数是一个回调函数，第二个参数是一个数组，用于指定监听哪些状态的变化。

例如，假设我们有一个状态`count`，并且希望在`count`发生变化时调用一个函数`handleCountChange`，可以这样写代码：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    handleCountChange();
  }, [count]);

  function handleCountChange() {
    // 处理count变化的逻辑
  }

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

在上面的代码中，我们使用`useEffect`函数监听`count`的变化，一旦`count`发生变化，就会调用`handleCountChange`函数。注意，第二个参数传递了`[count]`，表示只监听`count`的变化。如果第二个参数为空数组，表示不监听任何状态的变化；如果省略第二个参数，表示监听所有状态的变化。