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的回调函数，以确保在组件挂载后执行副作用操作。

分页时候使用

  const [data, setData] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const pageSize = 10; // 每页显示的图片数量
  const [totalRecords, setTotalRecords] = useState(0);




  useEffect(() => {
    fetchData();
  }, [page]);

useEffect 钩子用于在函数组件中执行副作用操作，例如获取数据、订阅事件等。它接受两个参数：一个回调函数和一个依赖数组。

在上述代码中，fetchData 是用于获取数据的函数。useEffect 钩子的回调函数中调用了 fetchData 函数，以便在组件渲染完成后执行数据获取操作。

这里的 [page] 是依赖数组，用于指定在哪些状态变化时触发副作用操作。
在这个例子中，只有当 page 状态发生变化时，fetchData 函数才会被调用。

换句话说，当组件的 page 状态发生变化时，useEffect 钩子会触发副作用操作，即调用 fetchData 函数，从而根据新的 page 值获取相应的数据。

使用 useEffect 钩子可以帮助您在适当的时机执行异步操作和副作用操作，以确保数据的正确加载和更新。

【重要】useEffect空依赖数组和非空依赖数组

1. 空依赖数组:

• 当 useEffect 的依赖数组为空时，effect 函数只在组件挂载和卸载时执行。这意味着 effect 函数只会在组件的初始渲染时执行一次，并在组件卸载时清除。
• 这种形式适合处理不依赖任何外部变量的副作用，或者在组件挂载和卸载时需要执行的清理操作。

useEffect(() => {
  // 这里的代码只会在组件的初始渲染时执行，并在组件卸载时清除
}, []);

2. 非空依赖数组:

• 当 useEffect 的依赖数组不为空时，effect 函数只在依赖数组中的值发生变化时执行，并在下一次依赖值变化或组件卸载之前清除。
• 这种形式适合处理依赖外部变量的副作用，effect 函数可以根据依赖数组中的值的变化来执行不同的操作。

useEffect(() => {
  // 这里的代码只会在依赖数组中的值发生变化时执行
}, [dependency1, dependency2]);

根据实际需求选择空依赖数组和非空依赖数组可以更好地控制副作用的执行时机和清除时机。