当前位置：首页 > article >正文

React中 useEffect 的原理

article 2024/12/24 11:27:38

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

1. 副作用的定义

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

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

2. 执行时机

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

3. 依赖数组

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

4. 清理副作用

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

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>
  );
};