1. 引言

在 React 16.8 版本之前，开发者主要通过类组件（Class Component）来管理组件的生命周期，使用如 componentDidMount、componentDidUpdate 和 componentWillUnmount 等方法来处理副作用（Side Effects）。 然而，类组件的结构往往较为复杂，难以复用逻辑。 为了解决这些问题，React 引入了 Hooks，允许在函数组件（Function Component）中使用状态和其他 React 特性。 其中，useEffect 是一个用于处理副作用的 Hook，可以替代类组件中的生命周期方法。([GeeksforGeeks][1])

本文将详细介绍如何使用 useEffect Hook 来模拟类组件的生命周期方法，并提供相应的示例代码。

---

2. useEffect 概述

useEffect 是一个用于在函数组件中处理副作用的 Hook。 它的基本语法如下：

useEffect(() => {// 副作用逻辑return () => {// 清理逻辑（可选）};
}, [依赖项]);

• 副作用逻辑：在组件渲染后执行的代码，例如数据获取、订阅等。
• 清理逻辑：在组件卸载或依赖项变化前执行的代码，用于清理副作用。
• 依赖项数组：指定副作用函数的依赖项，只有当依赖项发生变化时，副作用函数才会重新执行。

通过配置依赖项数组，可以控制副作用函数的执行时机，从而模拟类组件的生命周期方法。

---

3. 模拟类组件的生命周期方法

3.1 模拟 componentDidMount

要在组件挂载后执行副作用，可以传递一个空数组 [] 作为 useEffect 的第二个参数：

import React, { useEffect } from 'react';function Example() {useEffect(() => {console.log('组件已挂载');// 执行初始化操作，例如数据获取}, []); // 空数组确保只在挂载时执行一次return <div>示例组件</div>;
}

此效果函数仅在组件首次渲染后执行一次，类似于 componentDidMount。

3.2 模拟 componentDidUpdate

要在特定状态或属性更新后执行副作用，可以将这些依赖项包含在依赖数组中：

import React, { useState, useEffect } from 'react';function Example({ someProp }) {const [count, setCount] = useState(0);useEffect(() => {console.log('count 或 someProp 发生了变化');// 执行更新后的操作}, [count, someProp]); // 仅在 count 或 someProp 变化时执行return (<div><p>计数：{count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}

此效果函数在 count 或 someProp 发生变化后执行，类似于 componentDidUpdate。

3.3 模拟 componentWillUnmount

要在组件卸载前执行清理操作，可以在 useEffect 中返回一个清理函数：

import React, { useEffect } from 'react';function Example() {useEffect(() => {// 设置订阅或事件监听器const handleResize = () => {console.log('窗口大小发生变化');};window.addEventListener('resize', handleResize);// 返回清理函数return () => {console.log('组件将卸载，清理副作用');window.removeEventListener('resize', handleResize);};}, []); // 空数组确保仅在挂载和卸载时执行return <div>示例组件</div>;
}

此清理函数在组件卸载前执行，类似于 componentWillUnmount。

---

4. 多个 useEffect 的使用

在一个组件中，可以使用多个 useEffect 来分别处理不同的副作用逻辑：

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);const [name, setName] = useState('React');useEffect(() => {console.log('count 发生了变化');}, [count]);useEffect(() => {console.log('name 发生了变化');}, [name]);return (<div><p>计数：{count}</p><button onClick={() => setCount(count + 1)}>增加计数</button><p>名称：{name}</p><button onClick={() => setName('Hooks')}>更改名称</button></div>);
}

通过使用多个 useEffect，可以将副作用逻辑进行分离，增强代码的可读性和可维护性。

---

5. 注意事项

• 避免在循环或条件语句中调用 useEffect：useEffect 应该在组件的顶层调用，不能在循环、条件语句或嵌套函数中调用。
• 依赖数组的正确使用：确保将所有在效果函数中使用的外部变量添加到依赖数组中，以避免潜在的错误。
• 清理副作用：在 useEffect 中返回清理函数，以防止内存泄漏或不必要的副作用。

---

6. 总结

通过使用 useEffect，函数组件可以实现与类组件相同的生命周期行为，从而更简洁地管理副作用。 useEffect 的灵活性使得开发者可以根据需要精确控制副作用的执行时机，提升了代码的可维护性和可读性。