useEffect初学

### useEffect React Hooks 学习教程

#### 基本用法

`useEffect` 是 React 提供的一个 Hook，用于处理副作用。所谓副作用是指那些不是直接由函数计算返回值的操作，例如数据获取、订阅或手动修改 DOM 等[^1]。

当定义了一个 `useEffect` 函数时，该函数会在每次组件重新渲染完成后被调用。可以向此钩子提供第二个参数——依赖数组来控制何时触发副作用逻辑。如果省略了这个可选的依赖项列表，则每当有新的属性或状态更新时都会运行效果；而指定为空数组则意味着仅在首次挂载和卸载期间执行一次[^3]。

下面展示如何利用 `useEffect` 来设置文档标题：

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

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

  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

这段代码展示了怎样使用 `useEffect` 钩子，在页面加载完成以及每次点击按钮改变计数器数值后自动更改浏览器标签页的名字[^4]。

#### 示例

这里有一个更完整的例子说明了带有不同依赖关系的效果是如何工作的:

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

function App() {
  const [message, setMessage] = useState('Hello React!');
  
  // 当组件初次装载时打印消息
  useEffect(() => {
    console.log('Component mounted.');
  }, []);

  // 每次 message 发生变化时打印新旧值对比
  useEffect(() => {
    console.log(`Message was updated to "${message}"`);
  }, [message]);

  const changeMessage = () => {
    setMessage('Message changed!');
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={changeMessage}>Change Message</button>
    </div>
  );
}

export default App;

上述示例中包含了两个独立的作用域内的 `useEffect` 调用。第一个只会在初始渲染阶段被执行一次，因为它接收的是一个空数组作为其第二参数。第二个将在任何影响到 `message` 的变动发生之后立即响应并记录最新的文本内容至控制台日志里。