React组件异步数据获取的两种方式对比及最佳实践咨询

首先得纠正一个关键误区：Reselect选择器里绝对不应该包含Ajax这类异步操作！Reselect的核心作用是做同步的状态派生计算，利用缓存（memoization）避免重复计算、提升性能。把Ajax放在选择器里会打破它的设计原则——选择器必须是纯函数，输入相同就必须返回相同结果，而异步操作带有副作用，会导致选择器行为不可预测，还可能触发不必要的重复请求，完全是误用。

接下来看你的第二种方案，确实存在不少问题：

• componentWillReceiveProps是React已标记为过时的API（React 17+已移除），它的逻辑很容易引发bug（比如无限循环、状态不同步），官方推荐用componentDidUpdate或者getDerivedStateFromProps代替。
• 你直接把FetchUserList(this.props.groupId)的结果赋值给this.state.userList是错误的：如果FetchUserList是Redux的异步Action Creator（比如用redux-thunk），它不会直接返回请求到的用户列表，而是返回一个函数，这样你的state里存的根本不是有效数据。而且这种把Redux Action和组件本地state混在一起的写法，会让数据流变得混乱，不利于后期维护。

推荐的最佳实践 #

现在React生态里处理异步数据加载，主流有两种思路，取决于你是否使用Redux：

1. 基于Redux的规范方案（适合复杂应用）

用Redux官方推荐的工具链（比如Redux Toolkit）管理异步数据流，步骤如下：

• 用createAsyncThunk定义异步Action，封装Ajax请求逻辑
• 在Slice里处理请求的pending、fulfilled、rejected状态，把数据同步到store
• 用Reselect编写纯函数选择器，从store里派生组件需要的数据（这才是Reselect的正确用法）
• 组件在挂载或props变化时，dispatch对应的异步Action；通过useSelector（函数组件）或connect（类组件）获取数据和加载状态，根据状态渲染内容

示例代码（函数组件+Redux Toolkit）：

// 定义异步Action和Slice
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchUserListApi } from './api'; // 你的Ajax请求函数

export const fetchUserList = createAsyncThunk(
  'users/fetchUserList',
  async (groupId) => {
    const response = await fetchUserListApi(groupId);
    return response.data;
  }
);

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    list: [],
    status: 'idle', // idle/pending/fulfilled/rejected
    error: null,
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserList.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUserList.fulfilled, (state, action) => {
        state.status = 'fulfilled';
        state.list = action.payload;
      })
      .addCase(fetchUserList.rejected, (state, action) => {
        state.status = 'rejected';
        state.error = action.error.message;
      });
  },
});

export default usersSlice.reducer;

// 组件部分
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserList } from './usersSlice';
import { useEffect } from 'react';

function MyComponent({ groupId }) {
  const dispatch = useDispatch();
  const { list: userList, status, error } = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUserList(groupId));
  }, [dispatch, groupId]);

  if (status === 'pending') {
    return <div>加载中...</div>;
  }

  if (status === 'rejected') {
    return <div>加载失败：{error}</div>;
  }

  return (
    <div>
      {userList.map((userInfo) => (
        <span key={userInfo.id}>{userInfo.name}</span>
      ))}
    </div>
  );
}

export default MyComponent;

2. 无Redux的组件内方案（适合简单场景）

如果你的应用不需要全局状态管理，直接用React Hooks在组件内处理异步请求：

• 用useState管理本地的加载状态、数据和错误
• 用useEffect监听groupId变化，触发Ajax请求并更新状态

示例代码：

import { useState, useEffect } from 'react';
import { fetchUserListApi } from './api';

function MyComponent({ groupId }) {
  const [userList, setUserList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadUsers = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const data = await fetchUserListApi(groupId);
        setUserList(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    loadUsers();
  }, [groupId]);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>加载失败：{error}</div>;
  }

  return (
    <div>
      {userList.map((userInfo) => (
        <span key={userInfo.id}>{userInfo.name}</span>
      ))}
    </div>
  );
}

export default MyComponent;

总结 #

• 你的第一种方案错误使用了Reselect，必须避免在选择器中放入异步操作；
• 第二种方案不仅API过时，还存在Action使用错误和数据流混乱的问题，属于不良实践；
• 推荐根据应用复杂度选择上述两种方案之一，现在更优先用函数组件+Hooks的写法，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Deng Zhebin