useeffect 更新

`useEffect` 是 React Hooks 中的一个关键钩子，用于处理组件渲染后的副作用，比如数据获取、订阅、修改 DOM 或者清除定时器等。它的核心部分包括两个参数：一个函数（即副作用操作），另一个是依赖数组（决定何时重新运行该函数）。

当组件的状态（存储在依赖数组中的变量）发生变化时，`useEffect` 函数会被自动调用进行更新。如果依赖数组为空数组 (`[]`)，`useEffect` 只会在组件挂载初始化时执行一次，我们称之为“一次性效应”（也称为 “副作用初始化”）。

如果你想让某个副作用在每次组件更新后都运行，只需将需要观察的状态变量添加到依赖数组中，如：

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]); // 当 count 改变时，useEffect 将重新运行

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，每点击一次按钮，`count` 变量会增加，并且 `useEffect` 打印出新的计数值。