react hook如何监听数据的变化，useEffect

在 React 中，如果你需要监听某个状态或属性的变化，可以使用 useEffect Hook。useEffect 可以让你在函数组件中执行副作用操作，例如数据获取、订阅或手动更改 React 组件中的 DOM。

基本用法

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

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  // 使用 useEffect 来监听 data 的变化
  useEffect(() => {
    // 当 data 变化时，这个函数会被调用
    console.log('数据变化:', data);
  }, [data]); // 依赖数组中的 data 表示只有 data 变化时才执行

  return (
    <div>
      <button onClick={() => setData('新数据')}>
        更新数据
      </button>
    </div>
  );
};

export default ExampleComponent;

解释

1. 声明状态: 使用 useState 声明一个状态变量 data 和一个更新状态的函数 setData。

2. 使用 useEffect: useEffect 接收两个参数：一个是执行副作用的函数，另一个是依赖数组。当依赖数组中的值发生变化时，副作用函数会被重新执行。

3. 依赖数组: 在这个例子中，依赖数组包含 data，这意味着只有当 data 发生变化时，useEffect 中的副作用函数才会被执行。

示例：监听多个状态

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

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 监听 count 和 text 的变化
  useEffect(() => {
    console.log(`count: ${count}, text: ${text}`);
  }, [count, text]); // 依赖数组中的 count 和 text

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
};

export default MultiStateComponent;

在这个示例中，useEffect 监听 count 和 text 的变化。每当 count 或 text 发生变化时，useEffect 中的函数都会被执行。

清除副作用

在某些情况下，你可能需要在组件卸载时清除副作用，例如取消订阅或清理资源。你可以在 useEffect 中返回一个清除函数：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('定时器触发');
  }, 1000);

  // 清除函数
  return () => clearTimeout(timer);
}, []); // 空依赖数组表示只在组件挂载和卸载时执行

在这个例子中，useEffect 设置了一个定时器，并返回了一个清除函数，该函数在组件卸载时被调用以清除定时器。

希望这些示例能帮助你理解如何在 React 中使用 useEffect Hook 来监听数据变化！