React应用内导航与状态栈实现咨询：无URL变更下的状态回溯方案

你写的示例代码存在两个会直接导致生产环境故障的硬伤：

1. componentDidUpdate 中无差别执行setState 会触发无限重渲染循环：只要组件完成一次更新就会进入该生命周期，执行setState更新栈内容，又会触发下一次组件更新，周而复始最终导致页面内存占满卡死
2. 压栈时直接把包含stateStack属性的整个组件state对象存入栈数组，会造成无限嵌套的循环引用：每一层栈项都嵌套着之前完整的栈结构，随栈长度增长内存占用会呈指数级上升。

• 做状态边界拆分：将需要回溯的业务页面状态和导航栈本身的运行时状态完全拆分，绝对不能把栈本身的属性纳入被压栈的范围，从根源避免自引用问题。
• 取消无差别状态捕获：不要在组件更新生命周期里自动抓全量状态压栈，所有压栈动作必须由明确的用户交互触发（比如点击按钮跳转页面、表单提交进入下一个流程页），避免栈中堆积大量不需要回溯的细碎状态更新。
• 采用指针式栈结构代替纯数组头插：纯数组头插的写法无法处理回退后再跳转新页面的分支裁剪逻辑，用指针记录当前在栈中的位置，才能同时支持多步后退、回退后的前进路径保留，和浏览器原生导航栈的行为对齐。

class InAppNavigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 独立维护的业务页面状态，不包含导航栈逻辑
      currentViewState: {
        state1: null,
        state2: null,
        state3: null
      },
      // 导航栈专属运行时状态
      viewStack: [],
      currentStackIndex: -1
    };
  }

  // 触发前进导航：压入当前状态，切换到新页面
  pushView = (nextViewState) => {
    // 回退状态下跳转新页面时，先截断指针后方的旧栈分支
    const retainedStack = this.state.viewStack.slice(0, this.state.currentStackIndex + 1);
    const updatedStack = [...retainedStack, this.state.currentViewState];
    this.setState({
      viewStack: updatedStack,
      currentStackIndex: updatedStack.length - 1,
      currentViewState: nextViewState
    });
  };

  // 触发后退导航
  goBack = () => {
    if (this.state.currentStackIndex < 0) return;
    const targetView = this.state.viewStack[this.state.currentStackIndex];
    this.setState({
      currentStackIndex: this.state.currentStackIndex - 1,
      currentViewState: targetView
    });
  };

  // 触发前进导航（回退操作后的前进）
  goForward = () => {
    const nextIndex = this.state.currentStackIndex + 1;
    if (nextIndex >= this.state.viewStack.length) return;
    this.setState({
      currentStackIndex: nextIndex,
      currentViewState: this.state.viewStack[nextIndex]
    });
  };

  componentDidUpdate(prevProps, prevState) {
    // 该生命周期仅用于做渲染后的边界校验，禁止在此处直接压栈setState
  }
}

• 全程不会修改页面URL，所有导航状态都在组件内部闭环维护，完全匹配不依赖React Router、不触发地址栏变更的业务要求
• 栈结构行为和浏览器原生前进/后退逻辑一致，不会出现回退到中间页跳转新内容时丢失旧前进路径的问题
• 业务状态和栈逻辑解耦后，不会出现循环引用、内存泄漏的问题，栈长度也可以根据业务需要做上限裁剪（比如最多保留20步历史状态），避免长期运行内存占用过高

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