Redux Store更新导致HOC中出现无限状态重渲染循环

咱们先从最常见的触发点入手，一步步拆解问题、解决问题：

1. 先排查API请求的触发逻辑（最可能的元凶） #

无限循环的核心闭环通常是：组件渲染→发起API请求→请求成功更新Redux Store→Store变化触发组件重渲染→再次发起请求。所以首先要把请求的触发逻辑控制住。

类组件HOC的处理方式 #

确保请求只在首次挂载，或特定依赖项变化时触发，同时加数据存在性判断避免重复请求：

class WithPageHOC extends React.Component {
  componentDidMount() {
    const { pageData, fetchPageFrameData, currentPageId } = this.props;
    // 只有Store中没有对应页面的数据时才请求
    if (!pageData) {
      fetchPageFrameData(currentPageId);
    }
  }

  // 如果需要根据页面ID切换重新请求，加条件判断
  componentDidUpdate(prevProps) {
    const { currentPageId, fetchPageFrameData, pageData } = this.props;
    if (prevProps.currentPageId !== currentPageId && !pageData) {
      fetchPageFrameData(currentPageId);
    }
  }

  render() {
    return this.props.children;
  }
}

// 连接Redux
const mapStateToProps = (state) => ({
  pageData: state.page.frameData,
  currentPageId: state.currentPage.id,
});

const mapDispatchToProps = {
  fetchPageFrameData,
};

export default connect(mapStateToProps, mapDispatchToProps)(WithPageHOC);

函数组件HOC的处理方式 #

用useEffect时一定要设置精准的依赖项，同时加数据存在性判断：

const withPage = (WrappedComponent) => {
  return (props) => {
    const { pageData, currentPageId } = useSelector(state => ({
      pageData: state.page.frameData,
      currentPageId: state.currentPage.id,
    }));
    const dispatch = useDispatch();

    useEffect(() => {
      // 无数据时才发起请求
      if (!pageData) {
        dispatch(fetchPageFrameData(currentPageId));
      }
    }, [dispatch, currentPageId, pageData]); // 只保留必要依赖，避免无效触发

    return <WrappedComponent {...props} pageData={pageData} />;
  };
};

2. 检查Redux映射函数是否导致不必要重渲染 #

如果mapStateToProps或mapDispatchToProps每次都生成新的引用，组件会误以为props变化，从而触发重渲染。

优化mapStateToProps #

避免在映射中创建新对象/数组，如果需要转换数据，用useMemo缓存结果：

// 函数组件中用useMemo缓存转换后的数据
const formattedPageData = useMemo(() => {
  return pageData ? formatNavAndBreadcrumb(pageData) : null;
}, [pageData]);

优化mapDispatchToProps #

优先使用对象形式的映射，避免内联函数（内联函数每次渲染都会生成新引用）：

// 推荐：对象形式，connect会自动绑定dispatch，不会生成新引用
const mapDispatchToProps = {
  fetchPageFrameData,
};

// 不推荐：内联函数会导致每次渲染生成新函数，触发组件重渲染
const mapDispatchToProps = (dispatch) => ({
  fetchPageFrameData: () => dispatch(fetchPageFrameData()),
});

3. 检查Reducer的不可变更新是否正确 #

如果Reducer直接修改原状态（而不是返回新对象），会导致Redux状态判断异常，可能触发多次更新。确保Reducer总是返回新状态：

// 错误写法：直接修改原状态
case FETCH_PAGE_FRAME_SUCCESS:
  state.frameData = action.payload;
  return state;

// 正确写法：返回新状态对象
case FETCH_PAGE_FRAME_SUCCESS:
  return {
    ...state,
    frameData: action.payload,
  };

4. 用React DevTools精准定位 #

打开React DevTools，选中被HOC包裹的页面组件，查看「Why did this render?」选项，它会明确告诉你是哪个props/state变化导致了重渲染，帮你快速锁定问题。

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