React 的 useEffect Hook 用于在函数组件中执行副作用操作（例如数据获取、订阅事件等），它类似于类组件中的生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

useEffect 接收一个回调函数和一个可选的依赖数组。

import { useEffect } from 'react';

useEffect(() => {

// 在这里执行副作用操作

// 返回一个清除函数（可选）

return () => {

// 在组件销毁之前执行清除操作

};

}, [依赖数组]);

回调函数作为参数传递给 useEffect，它将在组件渲染后执行，每次组件更新时也会重新执行。

依赖数组是一个可选的参数，在数组中指定的依赖发生变化时， useEffect 将重新执行回调函数。如果省略了依赖数组，则每次组件更新时都会重新执行回调函数。

在回调函数中，我们可以进行各种副作用操作，比如订阅事件、发送网络请求、操作 DOM 等。

返回的清除函数（可选）将在组件销毁之前执行，用于清理副作用操作，比如取消订阅、清除定时器等。

以下是几个使用 useEffect 的示例：

基本用法：在组件渲染后执行副作用操作。

import { useEffect } from 'react';

function MyComponent() {

useEffect(() => {

console.log('Component rendered');

return () => {

console.log('Component cleanup');

};

}, []);

return null;

}

使用依赖项：在依赖项发生变化时执行副作用操作。

import { useEffect, useState } from 'react';

function MyComponent() {

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

useEffect(() => {

console.log(`Count changed: ${count}`);

return () => {

console.log('Component cleanup');

};

}, [count]);

return (

);

}

清理副作用操作：在组件销毁前执行清除操作。

import { useEffect } from 'react';

function MyComponent() {

useEffect(() => {

const subscription = subscribeToEvents();

return () => {

unsubscribeFromEvents(subscription);

};

}, []);

return null;

}

在这个例子中，我们订阅了一些事件，返回的清除函数会在组件销毁前取消订阅。

通过使用 useEffect Hook，我们可以将副作用操作集成到函数组件中，并根据需要进行清理操作，使组件更加灵活和可维护。

文章链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。