react useEffect

react useEffect

什么是 react useEffect

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

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

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

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

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

1. use 表示这是一个 Hook
   React Hooks 都以 use 开头,像 useState、useContext等,所以 useEffect 也遵循这个规范。

2. Effect 表示允许执行副作用
   useEffect 允许在函数组件内部执行副作用操作。副作用的概念很广泛,它就是指会对组件外部有影响的操作,如修改外部变量、触发渲染、访问 DOM 、订阅外部数据变化等。useEffect 就是用来处理这类副作用的。

3. 和 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 (
    <DefaultFooter
      copyright={`${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;

当组件首次被渲染到DOM中时，并在遇到useEffect时，会执行useEffect的回调函数。useEffect的回调函数会在组件挂载到DOM之后立即执行。我们可以在组件函数中使用useEffect钩子来处理副作用操作，其中包括在组件挂载时获取版本信息。

添加了useEffect钩子来在组件挂载时获取版本信息。在fetchVersion函数中，我们使用getVersion函数来发起异步请求获取版本信息，并将版本信息保存在softwareVersion状态中。

在组件挂载时，React会执行useEffect的回调函数，并在完成获取版本信息后更新组件的状态。

然后，我们在页脚的copyright属性中将softwareVersion与其他信息一起显示。

总结： 当组件首次被渲染到DOM中时，React会依次执行组件函数中的逻辑，包括useEffect的回调函数，以确保在组件挂载后执行副作用操作。