react useEffect

文章目录

react useEffect
- 什么是 react useEffect
- demo: 使用useEffect从后台获取版本信息

react useEffect

什么是 react useEffect

useEffect 是 React Hooks 中非常重要的一个 Hook。它的名称来源于 Effect 这个词,之所以这么命名,是因为它可以让你在函数组件中执行副作用操作。

副作用是指除了返回函数结果之外，还会对程序的状态或外部环境进行修改或交互的操作。例如，修改全局变量、发送网络请求、读写文件、订阅事件等都属于副作用操作。

在React中，组件函数应该是纯函数，不应该产生副作用。然而，有时我们需要在组件中执行副作用操作，如数据获取、订阅事件、更新DOM等。这时就可以使用useEffect这个特殊的Hook来处理副作用操作。

React中，使用useEffect来处理副作用操作，以确保在适当的时机执行这些操作，并将其与组件的渲染逻辑分离开来。

关于 useEffect 这个名字,我们可以从几个方面来理解:

use 表示这是一个 Hook
React Hooks 都以 use 开头,像 useState、useContext等,所以 useEffect 也遵循这个规范。
Effect 表示允许执行副作用
useEffect 允许在函数组件内部执行副作用操作。副作用的概念很广泛,它就是指会对组件外部有影响的操作,如修改外部变量、触发渲染、访问 DOM 、订阅外部数据变化等。useEffect 就是用来处理这类副作用的。
和 ComponentDidMount、ComponentDidUpdate、ComponentWillUnmount 具有相同的用途
如果你熟悉 class 组件的生命周期函数,useEffect 就同时具有这三个函数的功能。它结合了初始化副作用、更新副作用的处理。
所以综上所述,useEffect 之所以这么命名,主要基于:

它是一个 React Hook
它用于在函数组件内执行副作用操作
它可以覆盖 class 组件各种生命周期场景的副作用处理
这就是 useEffect 名字的来历。它使得函数组件也可以处理复杂的副作用逻辑,是 React Hooks 中非常重要的一个组件。

demo: 使用useEffect从后台获取版本信息

从后台获取版本信息，在页脚展示：

import { GithubOutlined } from '@ant-design/icons';
import { DefaultFooter } from '@ant-design/pro-components';
import { useIntl } from 'umi';
import { useEffect, useState } from 'react';
import { getVersion } from 'your-api-file'; // 替换为你的获取版本信息的API文件const Footer: React.FC = () => {const intl = useIntl();const defaultMessage = intl.formatMessage({id: 'app.footer.produced',defaultMessage: '',});const softwareName = 'xxx';const [softwareVersion, setSoftwareVersion] = useState<string>(''); // 添加类型注解 表明这是一个string类型const currentYear = new Date().getFullYear();useEffect(() => {// 在组件挂载时获取版本信息const fetchVersion = async () => {try {const versionData = await getVersion();const version = versionData.version;setSoftwareVersion(version || ''); // 处理版本号为空的情况，设置为空字符串} catch (error) {console.error('Failed to fetch version:', error);}};fetchVersion();}, []);return (<DefaultFootercopyright={`${currentYear} ${softwareName}_${softwareVersion} ${defaultMessage}`}links={[// {//   key: 'Ant Design Pro',//   title: 'Ant Design Pro',//   href: 'https://pro.ant.design',//   blankTarget: true,// },// {//   key: 'Ant Design',//   title: 'Ant Design',//   href: 'https://ant.design',//   blankTarget: true,// },]}/>);
};export default Footer;