在useEffect中只调用两个函数一次

基础概念

useEffect 是 React 中的一个 Hook，用于处理组件的副作用操作，比如数据获取、订阅或手动更改 DOM 等。useEffect 接收两个参数：一个函数和一个依赖数组。函数在组件挂载后、更新后或卸载前执行，依赖数组用于指定哪些值变化时应该重新运行这个函数。

类型

useEffect 主要有两种类型：

组件挂载和卸载时执行：不传入依赖数组或传入空数组 []。
组件更新时执行：传入依赖数组，当数组中的值变化时，副作用函数会重新执行。

应用场景

数据获取：在组件挂载后获取数据，并将数据存储在组件状态中。
订阅：订阅外部数据源，当数据变化时更新组件。
手动更改 DOM：例如，使用第三方库操作 DOM。

示例代码

假设我们有两个函数 fetchData 和 subscribeToUpdates，我们希望在组件挂载时只调用它们一次。

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  const subscribeToUpdates = () => {
    // 订阅逻辑
    console.log('Subscribed to updates');
  };

  useEffect(() => {
    fetchData();
    subscribeToUpdates();

    // 清理函数，组件卸载时执行
    return () => {
      // 取消订阅逻辑
      console.log('Unsubscribed from updates');
    };
  }, []); // 空数组表示只在挂载和卸载时执行

  return (
    <div>
      {data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>}
    </div>
  );
};

export default MyComponent;

解决问题的思路

确保副作用函数只在挂载时执行：通过传入空数组 [] 作为 useEffect 的第二个参数，确保 fetchData 和 subscribeToUpdates 只在组件挂载时执行一次。
清理副作用：在 useEffect 中返回一个清理函数，用于在组件卸载时执行清理操作，比如取消订阅。