React中 useEffect 的原理

黄毛火烧雪下2024-11-01 13:37

useEffect 是 React 中的一个 Hook，用于处理副作用（side effects），如数据获取、订阅、手动 DOM 操作等。理解 useEffect 的原理和工作机制对于有效地管理组件生命周期非常重要。

1. 副作用的定义

在 React 中，副作用是指那些与组件的渲染无关的操作。例如：

数据获取（如 API 请求）
事件监听（如添加和移除事件监听器）
手动 DOM 操作（如使用第三方库）
清理操作（如清除定时器）

2. 执行时机

组件渲染后执行：useEffect 中的函数会在组件渲染后执行。具体来说，它会在 React 完成 DOM 更新后调用。
异步执行：useEffect 中的函数在组件渲染完成后异步执行，不会阻塞浏览器的绘制。

3. 依赖数组

useEffect 接受两个参数：一个副作用函数和一个可选的依赖数组。
依赖数组决定了副作用函数何时重新执行：
- 如果依赖数组为空 \[\]，副作用函数只会在组件挂载和卸载时执行一次。
- 如果依赖数组中包含某些状态或 props，当这些依赖变化时，副作用函数会重新执行。

4. 清理副作用

在副作用函数中，你可以返回一个清理函数，用于清理副作用（如移除事件监听器、清除定时器等）。React 会在组件卸载时调用这个清理函数。

c 复制代码

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

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

  useEffect(() => {
    console.log('Component mounted or count changed:', count);

    // 清理函数
    return () => {
      console.log('Cleaning up...');
    };
  }, [count]); // 依赖 count

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

5. 执行顺序

当组件首次挂载时，useEffect 中的函数会在 DOM 更新后执行。
当组件更新时，如果 count 的值发生变化，之前的副作用会被清理，然后重新执行 useEffect 中的函数。

6.总结

useEffect 用于处理副作用，允许你在组件的不同生命周期阶段执行代码。
它在组件渲染后异步执行，并可通过依赖数组控制执行频率。
清理函数可以确保在组件卸载时清除不必要的副作用。