面试题：React 中 useEffect 进行数据获取时如何避免重复请求

Question

在 React 应用里，使用 useEffect 进行数据获取操作。假设你从 API 获取用户列表数据，当组件多次渲染时，可能会导致重复请求。请描述至少两种方法来避免这种重复请求，并给出简单的代码示例。

Answer 1

方法一：使用状态变量标记请求状态

1. 原理：在组件内部维护一个状态变量，用于标记数据是否已经获取过。如果已经获取过，则不再发起新的请求。
2. 代码示例：

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [isDataFetched, setIsDataFetched] = useState(false);

  useEffect(() => {
    if (!isDataFetched) {
      fetch('https://example.com/api/users')
      .then(response => response.json())
      .then(data => {
          setUsers(data);
          setIsDataFetched(true);
        });
    }
  }, []);

  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

方法二：使用 useEffect 的依赖数组优化

1. 原理：通过仔细设置 useEffect 的依赖数组，确保只有在必要的时候才触发副作用（数据获取操作）。如果依赖数组为空，useEffect 只会在组件挂载时执行一次。
2. 代码示例：

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

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://example.com/api/users')
  .then(response => response.json())
  .then(data => setUsers(data));
  }, []);

  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

方法三：使用自定义 Hook 封装数据获取逻辑

1. 原理：将数据获取逻辑封装到一个自定义 Hook 中，在自定义 Hook 内部维护请求状态，避免重复请求。
2. 代码示例：

import { useState, useEffect } from'react';

const useFetchUsers = () => {
  const [users, setUsers] = useState([]);
  const [isDataFetched, setIsDataFetched] = useState(false);

  useEffect(() => {
    if (!isDataFetched) {
      fetch('https://example.com/api/users')
      .then(response => response.json())
      .then(data => {
          setUsers(data);
          setIsDataFetched(true);
        });
    }
  }, []);

  return users;
};

const UserList = () => {
  const users = useFetchUsers();

  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;