React中如何分时机执行useEffect？解决路由刷新跳转登录问题

一、刷新跳转问题的原因与修复 #

核心原因 #

刷新页面时，React组件重新初始化：

• protect 初始值为 false
• userData 通常从本地存储（如localStorage）或后端异步加载，初始阶段为undefined/null
• Protected_route的useEffect会优先检测到user=false并触发跳转，后续userData加载完成后protect变为true，但跳转已执行

修复方案 #

1. 新增加载状态，避免过早跳转

不需要额外的protect状态，直接用userData的加载状态控制路由保护：

首先修改你的UserFun自定义Hook，返回加载状态（假设内部是从本地存储/后端获取用户数据）：

function UserFun() {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟从localStorage获取用户数据
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUserData(JSON.parse(storedUser));
    }
    setLoading(false);
  }, []);

  return { userData, setUserData, loading };
}

修改App组件，直接传递userData和loading给路由保护组件：

const { userData, setUserData, loading } = UserFun();

return (
  <ShowModel.Provider value={{ show, setShow }}>
    {loading ? <div>加载中...</div> : (
      <Routes>
        <Route path="/" element={<Register />} />
        <Route path="Login" element={<Login />} />
        <Route
          path="Todo"
          element={
            <Protected_route user={userData} loading={loading}>
              <Todo />
            </Protected_route>
          }
        />
      </Routes>
    )}
  </ShowModel.Provider>
);

最后修改Protected_route组件，加入加载状态判断：

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function Protected_route({ children, user, loading }) {
  const navigate = useNavigate();

  useEffect(() => {
    // 加载完成后再判断是否跳转
    if (!loading && !user) {
      navigate("/Login");
    }
  }, [user, loading, navigate]);

  // 加载中或用户已登录时渲染子组件
  if (loading || user) {
    return children;
  }
  return null;
}

2. 移除冗余的protect状态

直接用userData判断用户登录状态，减少状态同步的潜在问题。

二、分时机执行多个useEffect的方法 #

React中useEffect的执行时机由依赖数组决定，通过配置不同依赖可实现分时机执行：

• 组件挂载时仅执行一次：依赖数组为空[]，仅在组件首次渲染完成后执行

  useEffect(() => {
    // 初始化逻辑：比如获取用户信息
  }, []);
  

• 指定依赖变化时执行：依赖数组放入需要监听的变量，变量更新时触发

  useEffect(() => {
    // userData变化时执行的逻辑：比如更新登录状态
  }, [userData]);
  
  useEffect(() => {
    // 另一个状态变化时执行的逻辑
  }, [otherState]);
  

• 组件每次更新都执行：不写依赖数组，组件每次渲染完成后都会执行

  useEffect(() => {
    // 每次更新都需要执行的逻辑
  });
  

若需控制多个useEffect的执行顺序，React会严格按照代码中useEffect的定义顺序依次执行，调整代码位置即可控制顺序。

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