掌握React中的useEffect：函数组件中的魔法钩子

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

标题：

摘要：

本文将详细介绍React中的useEffect钩子，让你了解如何在函数组件中执行副作用操作，如数据获取、订阅或手动更改React组件中的DOM。

引言：

React是一个强大的前端框架，它帮助开发者高效地构建用户界面。在React中，函数组件因其简洁性和易于使用而受到许多开发者的喜爱。然而，函数组件在进行一些副作用操作时可能会遇到一些困扰。为了解决这个问题，React提供了一个神奇的钩子——useEffect。本文将带你深入了解useEffect钩子，并展示如何在函数组件中使用它来执行副作用操作。

正文：

1. useEffect概述

useEffect是React提供的一个钩子，它允许你在函数组件中执行副作用操作。副作用操作是指那些对外部世界产生影响的行为，比如数据获取、订阅或手动更改React组件中的DOM。

2. useEffect的基本使用

要在函数组件中使用useEffect，首先需要导入它：

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

然后，在组件内部调用useEffect，并传入一个函数作为参数。这个函数就是你的副作用操作：

function Example() {
  useEffect(() => {
    // 你的副作用操作
  });
  // ...
}
1
2
3
4
5
6

3. useEffect的注意事项

（1）不要在useEffect中直接修改组件的状态

useEffect的主要作用是执行副作用操作，而不是修改组件的状态。如果你需要在组件加载后获取数据或执行其他操作，应该在useEffect中调用setState。

（2）确保useEffect中的副作用操作在需要时执行

useEffect中的副作用操作应该在组件挂载、卸载或依赖项变化时执行。你可以通过在useEffect中添加依赖项数组来控制副作用操作的执行时机。

4. useEffect的实战技巧

（1）在useEffect中进行数据获取
在React组件加载时，我们通常需要从服务器获取数据。使用useEffect，我们可以很容易地在组件加载后执行数据获取操作：

import React, { useState, useEffect } from 'react';
function Example() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(response => setData(response.data));
  }, []); // 空依赖项数组确保只在组件挂载时执行
  // ...
}
1
2
3
4
5
6
7
8

（2）在useEffect中进行订阅和卸载操作
如果你需要在组件卸载时取消订阅或执行其他操作，可以在useEffect中返回一个函数：

import React, { useState, useEffect } from 'react';
function Example() {
  const [subscription, setSubscription] = useState(null);
  useEffect(() => {
    const handleDataChange = () => {
      // 处理数据变化
    };
    const subscription = dataSource.subscribe(handleDataChange);
    return () => {
      subscription.unsubscribe();
    };
  }, []); // 空依赖项数组确保只在组件挂载时执行
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结：

useEffect是React中一个非常强大的钩子，它让你能够在函数组件中执行副作用操作。通过本文的介绍，相信你已经对useEffect有了更深入的了解。在实际开发中，合理使用useEffect，可以帮助你更高效地构建React应用程序。

参考资料：

1. React官方文档：useEffect
2. React Hooks：useEffect详解
3. React Hooks：useEffect高级用法