使用React Redux高阶组件处理认证路由时出现无限循环问题

嘿，这个无限循环的问题我之前在做认证路由时也踩过坑，咱们一步步拆解可能的原因和解决方案：

1. 先排查HOC的调用时机 #

最常见的坑就是在组件内部重复调用HOC，比如在类组件的render方法里或者函数组件的内部每次渲染时执行withAuth(Component)。这会导致每次渲染都生成一个全新的组件实例，React会卸载旧组件、挂载新组件，进而触发componentWillMount里的认证逻辑，派发SIGN_IN动作后又触发渲染，形成循环。

错误示例： #

class Dashboard extends React.Component {
  render() {
    // 千万别在render里调用HOC！每次渲染都会生成新组件
    const ProtectedDashboard = withAuth(DashboardInner);
    return <ProtectedDashboard />;
  }
}

解决方案： #

把HOC的调用移到组件定义的外部，只执行一次：

// 外部定义，只创建一次组件
const ProtectedDashboard = withAuth(DashboardInner);

class Dashboard extends React.Component {
  render() {
    return <ProtectedDashboard />;
  }
}

2. 检查重定向逻辑的触发条件 #

如果你的HOC里做了路由跳转，很可能是每次挂载都无条件执行跳转导致的循环。比如用户已经认证时，你每次都history.push('/dashboard')，而跳转又会触发组件重新挂载，再次执行跳转逻辑，无限循环。

错误示例： #

componentWillMount() {
  const user = localStorage.getItem('user');
  if (user) {
    this.props.signIn();
  }
  
  if (this.props.isAuthenticated) {
    // 不管当前路径是什么，都跳转到dashboard
    this.props.history.push('/dashboard');
  } else {
    this.props.history.push('/login');
  }
}

解决方案： #

只有当当前路径不符合预期时才执行跳转：

componentWillMount() {
  const { isAuthenticated, history, location } = this.props;
  const user = localStorage.getItem('user');

  // 仅当本地有用户信息但Redux状态未更新时，才派发登录动作
  if (user && !isAuthenticated) {
    this.props.signIn();
  }

  // 未认证时，仅当前不在登录页才跳转
  if (!isAuthenticated) {
    if (location.pathname !== '/login') {
      history.push('/login');
    }
  } 
  // 已认证时，仅当前在登录页才跳转至首页
  else {
    if (location.pathname === '/login') {
      history.push('/dashboard');
    }
  }
}

3. 替换废弃的componentWillMount #

React 17+已经废弃了componentWillMount，这个生命周期钩子可能在服务器渲染或某些场景下被多次调用。换成componentDidMount可以确保只在客户端组件挂载后执行一次，减少不必要的触发：

componentDidMount() {
  // 把原来componentWillMount里的逻辑移到这里
  const { isAuthenticated, history, location } = this.props;
  const user = localStorage.getItem('user');

  if (user && !isAuthenticated) {
    this.props.signIn();
  }

  if (!isAuthenticated && location.pathname !== '/login') {
    history.push('/login');
  } else if (isAuthenticated && location.pathname === '/login') {
    history.push('/dashboard');
  }
}

4. 优化Redux的状态映射 #

如果你的HOC是用connect包裹的，检查mapStateToProps是否每次都返回新的对象/数组。比如在里面创建新数组或对象会导致组件认为状态变化，触发不必要的重新渲染，间接引发循环。

错误示例： #

const mapStateToProps = (state) => {
  // 每次都返回新对象，导致组件重复渲染
  return {
    isAuthenticated: state.auth.isAuthenticated,
    user: { ...state.auth.user }
  };
};

解决方案： #

尽量返回稳定的引用，只在状态真的变化时更新：

const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.auth.isAuthenticated,
    user: state.auth.user // 直接返回原引用，除非user本身是不可变更新的
  };
};

按照这几个步骤排查，应该能定位到无限循环的根源！

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