ReactJS useEffect Hook

2025 年 1 月 7 日 | 阅读 9 分钟

理解 React 中的 `useEffect` Hook

useEffect hook 是 React 函数式组件的一个关键方面。它用于管理副作用，例如数据获取、DOM 操作等。这个 hook 模拟了基于类的组件的生命周期方法。在本文中，我们将深入探讨 useEffect hook、它的用例以及如何使用各种示例来实现它。

什么是 `useEffect` Hook？

React 中的 useEffect hook 用于处理副作用，即组件渲染的结果。常见的副作用包括数据获取、DOM 更新和订阅管理。默认情况下，这个 hook 在每次渲染时运行，但您也可以使用依赖项数组来控制其行为，我们稍后会讨论这一点。

选择 `useEffect` Hook 的原因

React 中引入 useEffect hook 的目的是简化和优化函数式组件中副作用的管理。在基于类的组件中，副作用通常通过 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法进行管理。然而，这种方法可能导致意外的副作用和复杂的代码。useEffect hook 为处理这些任务提供了一种更优雅、更可预测的解决方案。

导入 `useEffect` Hook

要在 React 组件中使用 useEffect hook，您需要从 'react' 库中导入它

此导入语句使 useEffect 函数可以在您的组件中使用。

`useEffect` Hook 的结构

`useEffect` hook 接受两个参数，第二个参数是可选的。其语法如下：

`useEffect` 函数将一个函数（回调）作为第一个参数。这个函数包含将作为副作用执行的代码。第二个参数 `` 是一个数组，允许您为 effect 指定依赖项。这些依赖项控制 effect 何时运行。

使用 `useEffect` 控制副作用

`useEffect` hook 提供了多种控制 effect 运行方式的方法。这些控制机制对于微调组件的行为至关重要。让我们探讨这些选项：

1. 每次渲染时运行： 如果您不指定任何依赖项，effect 将在每次渲染时运行。当您需要在组件渲染时执行代码时，这很有用。

这是一个示例

useEffect(() => {
    // Code to run on every render
});

2. 只运行一次

要确保 effect 只运行一次，通常在初始渲染期间，您可以传递一个空的依赖项数组。

useEffect(() => {
    // Code to run on the initial render
}, []);

3. 依赖项更改时运行： 通过在数组中指定依赖项，您可以在这些依赖项之一更改时运行 effect。当您想响应特定 props 或 state 变量的变化时，这尤其有用。

useEffect(() => {
    // Code to run when props or state changes
}, [props, state]);

使用 useEffect 模拟生命周期方法

`useEffect` hook 可用于在函数式组件中模拟各种基于类的组件生命周期方法的行为。

1. 模拟 componentDidMount

要模拟 componentDidMount 的行为，您可以使用一个空的依赖项数组。这确保了 effect 在组件挂载时只运行一次。

useEffect(() => {
    // Code to run during the mounting phase
    console.log("Mimicking componentDidMount in a Functional Component");
}, []);

2. 模拟 componentDidUpdate

要模拟 componentDidUpdate 的行为，您可以在数组中指定依赖项。当任何依赖项更改时，effect 都会运行。

useEffect(() => {
    // Code to run during the updating phase
    console.log("Mimicking componentDidUpdate in a Functional Component");
}, [values]);

在此示例中，当 values 变量更改时，effect 会运行，从而触发重新渲染。

3. 模拟 componentWillUnmount

要模拟 componentWillUnmount 的行为，您可以在 effect 中返回一个清理函数。当组件被卸载时，将调用此函数。

useEffect(() => {
    return () => {
        // Code to run during the unmounting phase
        console.log("Functional Component Removed");
    };
}, []);

此清理函数允许您在组件从 DOM 中移除之前执行清理任务。现在，让我们深入研究一些示例来阐释这些概念。

示例 1：每次渲染时运行

假设您有一个计数器组件，并且您希望在每次渲染时更新文档标题以显示当前计数。以下是如何使用 useEffect hook 实现此目的的方法：

import React, { useState, useEffect } from "react";
function CounterComponent() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    });

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

export default CounterComponent;

输出

在此示例中，没有依赖项的 useEffect hook 在每次渲染时使用当前计数更新文档标题。

示例 2：只运行一次

假设您需要在组件挂载时初始化一些数据，并且不希望 effect 在后续渲染时运行。您可以为此目的使用一个空的依赖项数组。以下是一个示例：

import React, { useState, useEffect } from "react";
function InitializationComponent() {
    const [initialized, setInitialized] = useState(false);

    useEffect(() => {
        if (!initialized) {
            // Simulate data initialization here (you can replace this with your actual data initialization logic)
            setTimeout(() => {
                // After a delay, setInitialized to true to simulate initialization completion
                setInitialized(true);
            }, 2000); // Simulating a 2-second initialization process
        }
    }, [initialized]);

    return (
        <div>
            <p>Initialization Status: {initialized ? "Initialized" : "Not Initialized"}</p>
        </div>
    );
}

function App() {
    return (
        <div>
            <h1>Initialization App</h1>
            <InitializationComponent />
        </div>
    );
}

export default App;
export default InitializationComponent;

输出

在此示例中，effect 在初始渲染期间只运行一次以初始化数据。

示例 3：依赖项更改时运行

假设您需要根据选定的类别获取并显示数据。您可以使用带有依赖项数组的 useEffect hook，在类别更改时更新数据。以下是一个示例：

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

function DataFetchingComponent({ selectedCategory }) {
    const [data, setData] = useState([]);

    useEffect(() => {
        // Fetch data based on the selected category
        // Update 'data' state with the fetched data
    }, [selectedCategory]);

    return (
        <div>
            <h2>Data for Category: {selectedCategory}</h2>
            <ul>
                {data.map((item) => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default DataFetchingComponent;

输出

在此示例中，当 selectedCategory 更改时，useEffect hook 运行，获取并显示更新类别的数据。

在下一节中，我们将探讨使用 useEffect hook 获取数据、处理 DOM 操作以及管理订阅或事件监听器的更复杂场景。

使用 useEffect 获取数据

`useEffect` hook 最常见的用例之一是从 API 获取数据。让我们深入了解如何使用 useEffect 获取数据并更新组件的状态。

使用 useEffect 获取数据

假设您有一个组件需要在挂载时从 API 获取数据。您可以使用带有空依赖项数组的 useEffect hook 来确保获取操作只发生一次，类似于基于类的组件中的 componentDidMount。以下是如何做到这一点：

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

function DataFetchingComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        // Fetch data from an API
        fetch("https://api.example.com/data")
            .then((response) => response.json())
            .then((data) => setData(data))
            .catch((error) => console.error("Error fetching data: ", error));
    }, []);

    return (
        <div>
            <h2>Data from API:</h2>
            <ul>
                {data.map((item) => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}
export default DataFetchingComponent;

输出

在此示例中，DataFetchingComponent 在挂载时从 API 获取数据。获取的数据存储在组件的状态中，并用于渲染项目列表。使用带有空依赖项数组的 useEffect hook 可确保在组件挂载时只获取一次数据。

使用 useEffect 处理 DOM 操作

useEffect hook 的另一个常见用例是更新和操作 DOM。让我们看一个示例，其中我们使用 useEffect 在延迟后更改组件的背景颜色。

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

function BackgroundColorChange() {
    const [backgroundColor, setBackgroundColor] = useState("white");

    useEffect(() => {
        // Change the background color after rendering
        const timer = setTimeout(() => {
            setBackgroundColor("lightblue");
        }, 2000);

        return () => {
            // Clean up by clearing the timer when unmounting
            clearTimeout(timer);
        };
    }, []);

    return (
        <div
            style={{ backgroundColor: backgroundColor, padding: "20px", textAlign: "center" }}
        >
            <h2>Background Color Change</h2>
        </div>
    );
}

export default BackgroundColorChange;

输出

在此示例中，BackgroundColorChange 组件最初的背景是白色的。我们使用带有空依赖项数组的 useEffect hook 在 2 秒延迟后将背景颜色更改为“lightblue”。此外，我们在组件卸载时清理计时器以防止内存泄漏。

使用 useEffect 进行订阅和事件监听器

您还可以使用 useEffect hook 来设置和管理订阅或事件监听器。以下是如何订阅实时数据源的示例：

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

function RealTimeDataComponent() {
    const [realTimeData, setRealTimeData] = useState([]);

    useEffect(() => {
        // Set up a subscription to real-time data
        const subscription = subscribeToRealTimeData((data) => {
            setRealTimeData(data);
        });

        return () => {
            // Clean up the subscription when unmounting
            unsubscribeFromRealTimeData(subscription);
        };
    }, []);

    return (
        <div>
            <h2>Real-Time Data:</h2>
            <ul>
                {realTimeData.map((item) => (
                    <li key={item.id}>{item.value}</li>
                ))}
            </ul>
        </div>
    );
}

export default RealTimeDataComponent;

输出

在此示例中，RealTimeDataComponent 设置了一个订阅以接收实时数据。带有空依赖项数组的 useEffect hook 确保在组件挂载时只建立一次订阅。当组件卸载时，它会清理订阅以防止内存泄漏。

优点

React 中的 useEffect hook 提供了许多优点，使其成为管理函数式组件中副作用的强大工具。以下是使用 useEffect hook 的一些主要优点：

简化副作用管理： useEffect hook 的主要目的是以声明式和直接的方式管理副作用。它取代了基于类的组件中对复杂生命周期方法的需要，从而更容易处理异步操作。
促进函数式组件： 使用 useEffect hook，您可以使用函数式组件来完成更广泛的任务。这简化了组件层次结构，并促进了无状态函数式组件的使用，这些组件更具可预测性且易于理解。
精细控制： useEffect hook 提供了对副作用何时运行的精细控制。您可以指定依赖项，以便仅在某些值更改时触发 effect。这确保您响应特定事件执行代码，从而减少不必要的渲染。
防止内存泄漏： 该 hook 允许您设置清理函数，确保在组件卸载时正确释放资源。这有助于防止内存泄漏并确保高效的资源管理。

缺点

过度使用的可能性： 过度使用 useEffect hook 可能导致性能问题。在每次渲染时运行不必要的 effect 会影响应用程序的性能，因为每个 effect 都会增加渲染周期。
依赖项数组： 在依赖项数组中定义正确的依赖项可能具有挑战性。省略依赖项可能导致数据过时，而过度指定依赖项可能导致过多的渲染和性能下降。
清理逻辑： 虽然 useEffect 允许您定义清理函数，但开发人员可能会忘记包含它们，这可能导致内存泄漏或未管理的资源。
闭包和过时数据： 在 useEffect 回调中使用 state 或 props 时，需要注意闭包。使用在先前渲染中捕获的变量可能导致过时数据。
测试复杂性： 测试带有 useEffect 的组件可能比测试普通函数更复杂。您可能需要使用模拟或特殊的测试库来正确处理副作用。

应用

React 中的 useEffect hook 是一个多功能的工具，可应用于 React 组件中的各种应用程序。以下是 useEffect hook 的一些常见用例和应用程序：

数据获取： 从 API 获取数据是一个常见的用例。您可以使用 useEffect 在组件挂载时或在特定依赖项更改时进行异步数据请求。这对于构建数据驱动的应用程序至关重要，例如新闻源、天气应用程序或电子商务网站。
订阅管理： 通过订阅或事件监听器管理实时数据更新。例如，您可以使用 useEffect 订阅 WebSocket 以实现实时聊天应用程序或股票市场更新。
DOM 操作： 动态操作文档对象模型 (DOM)。您可以使用 useEffect 来响应用户交互、计时器或数据更改来更新 DOM。这对于构建交互式 Web 应用程序非常有用。
身份验证： 处理用户身份验证和授权。您可以使用 useEffect 来检查用户是否已通过身份验证，并相应地将他们重定向到登录页面或仪表板。

结论

useEffect hook 是 React 中管理函数式组件中副作用的通用工具。它可以用来模拟生命周期方法的行为、获取数据、操作 DOM、设置订阅等等。通过了解如何有效地使用 useEffect，您可以创建动态且响应迅速的 React 应用程序。请记住，在使用 useEffect 时要考虑依赖项和清理函数，以确保您的应用程序按预期运行并避免潜在问题。

在本文中，我们深入探讨了 useEffect hook，通过各种示例对其用途和实现进行了全面了解。无论您是获取数据、操作 DOM 还是管理订阅，useEffect hook 都能让您在 React 应用程序中以更可控、更高效的方式处理副作用。

下一主题1401-react-js-with-font-awesome

ReactJS useEffect Hook

理解 React 中的 `useEffect` Hook

什么是 `useEffect` Hook？

选择 `useEffect` Hook 的原因

导入 `useEffect` Hook

`useEffect` Hook 的结构

使用 `useEffect` 控制副作用

使用 useEffect 模拟生命周期方法

1. 模拟 componentDidMount

2. 模拟 componentDidUpdate

3. 模拟 componentWillUnmount

示例 1：每次渲染时运行

示例 2：只运行一次

示例 3：依赖项更改时运行

使用 useEffect 获取数据

使用 useEffect 获取数据

使用 useEffect 处理 DOM 操作

使用 useEffect 进行订阅和事件监听器

优点

缺点

应用

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

ReactJS useEffect Hook

理解 React 中的 `useEffect` Hook

什么是 `useEffect` Hook？

选择 `useEffect` Hook 的原因

导入 `useEffect` Hook

`useEffect` Hook 的结构

使用 `useEffect` 控制副作用

使用 useEffect 模拟生命周期方法

1. 模拟 componentDidMount

2. 模拟 componentDidUpdate

3. 模拟 componentWillUnmount

示例 1：每次渲染时运行

示例 2：只运行一次

示例 3：依赖项更改时运行

使用 useEffect 获取数据

使用 useEffect 获取数据

使用 useEffect 处理 DOM 操作

使用 useEffect 进行订阅和事件监听器

优点

缺点

应用

结论

相关帖子

将 ejs 转换为 React

React 开发人员简历

React 中的 Css

ReactJS 架构

React 中的内联样式

React-Paginate

React 管理员

ReactJS 工作

将字符串转换为组件 React

React.js vs Node.js

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器