如何在React函数组件中用useRef缓存Redux Connect数据？

我明白你的困扰——类组件里能顺利在API请求完成后拿到Redux更新后的props并缓存，但函数组件里用useRef总是拿到旧值，这其实是函数组件的闭包特性和Redux状态更新的异步性导致的，咱们一步步来解决：

问题根源分析 #

在你的函数组件代码里，loadAsyncData函数捕获的是组件第一次渲染时的data1FromReduxConnect快照。当你await makeAPICall()完成后，Redux会更新状态并触发组件重新渲染，但此时loadAsyncData里的data1FromReduxConnect还是旧的闭包值，所以缓存的不是最新数据。

而类组件里的this.props是动态指向当前组件props的，所以在await makeAPICall()之后，this.props.data1FromReduxConnect已经是更新后的值了，这就是两者的核心差异。

解决方案：拆分API请求与缓存逻辑 #

我们需要把“触发API请求”和“监听Redux状态更新并缓存”拆成两个独立的逻辑，利用useEffect的依赖监听来捕获最新的props：

import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux'; // 假设你使用react-redux连接Redux

export const MyFunctionComponent = props => {
  const { data1FromReduxConnect, makeAPICall } = props;
  // 初始化缓存，和类组件的_myCachedData保持一致
  const myCachedData = useRef({ 'data1': {} });

  // 1. 组件挂载时触发API请求，仅执行一次
  useEffect(() => {
    const fetchData = async () => {
      await makeAPICall();
    };
    fetchData();
  }, [makeAPICall]); // 依赖makeAPICall，确保其引用变化时重新执行（按需调整）

  // 2. 监听data1FromReduxConnect的变化，更新缓存
  useEffect(() => {
    // 避免缓存空值或初始默认值，可根据业务调整判断条件
    if (data1FromReduxConnect && Object.keys(data1FromReduxConnect).length > 0) {
      myCachedData.current.data1 = data1FromReduxConnect;
      console.log('缓存已更新:', myCachedData.current.data1);
    }
  }, [data1FromReduxConnect]); // 依赖data1FromReduxConnect，状态变化时触发

  return (
    // 你的组件内容
    <div>组件内容</div>
  );
};

// 修正拼写错误：mapStateToProps（原代码写为mapStateTopProps）
const mapStateToProps = (state) => {
  const { data1FromReduxConnect } = state;
  return { data1FromReduxConnect }; // 确保返回对象，否则props无法获取该字段
};

// 连接Redux，将action creator传入组件props
export default connect(mapStateToProps, { makeAPICall })(MyFunctionComponent);

关键细节说明 #

1. 拆分useEffect：第一个useEffect只负责在组件挂载时触发API请求，依赖数组设为[makeAPICall]（如果makeAPICall是稳定引用，也可以用空数组[]）；第二个useEffect专门监听data1FromReduxConnect的变化，确保每次Redux状态更新后都能拿到最新值缓存。
2. useRef的作用：useRef的current属性不会随组件渲染而重置，能保持跨渲染的状态，和类组件里的实例变量_myCachedData作用一致。
3. 异步函数写法：useEffect的回调不能直接是async函数，所以我们在内部定义了fetchData异步函数再调用，避免触发警告。
4. 边界处理：增加了对data1FromReduxConnect的非空判断，避免缓存无效数据。

额外优化建议 #

• 可以用useState维护isLoading状态，在API请求开始和结束时更新，提升用户体验；
• 如果你使用Redux Toolkit，推荐用useSelector和useDispatch替代connect写法，代码会更简洁：

  import { useSelector, useDispatch } from 'react-redux';
  // 替代connect的mapStateToProps
  const data1FromReduxConnect = useSelector(state => state.data1FromReduxConnect);
  // 获取dispatch并触发action
  const dispatch = useDispatch();
  const makeAPICall = () => dispatch(yourActionCreator());
  

这样调整后，函数组件就能像类组件一样正确缓存Redux更新后的状态值了，完全不需要保留类组件~

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