深入理解React useEffect与路由导航组件的执行时序

1. React的渲染与副作用生命周期

在深入分析之前，理解react组件的生命周期至关重要。react将组件的生命周期分为两个主要阶段：

• 渲染阶段 (Render Phase)：此阶段React会调用组件的函数体（或render方法），计算并生成虚拟DOM树。在这个阶段，不应该执行任何具有副作用的操作（如数据获取、DOM操作、订阅等）。
• 提交阶段 (Commit Phase)：此阶段React会将虚拟DOM的变更实际应用到真实DOM上。在DOM更新完成后，React会执行所有useEffect钩子中定义的副作用函数。

这意味着，useEffect中的代码总是在组件完成渲染并更新DOM之后才执行。如果一个组件在渲染阶段返回了另一个组件（例如<Navigate />），那么当前渲染周期的useEffect会在整个渲染树稳定后执行。

2. <Navigate /> 组件的工作原理

react-router-dom中的<Navigate />组件并非直接渲染目标路由组件，而是一个用于触发导航副作用的特殊组件。根据其内部实现，<Navigate />本身在渲染阶段会返回null，并在其内部的useEffect中执行实际的导航逻辑。

// 简化版的 <Navigate /> 内部实现
function Navigate() {
  React.useEffect(
    () => navigate(JSON.parse(jsonPath), { replace, state, relative }),
    [navigate, jsonPath, relative, replace, state]
  );
  return null; // 在渲染阶段返回 null
}

从上述代码可以看出，<Navigate />的导航行为被封装在一个useEffect中。这意味着，当<Navigate />被渲染时，它首先返回null，然后等待当前渲染周期结束后，其内部的useEffect才会被触发，进而执行实际的URL跳转操作。这个跳转操作会引起React应用程序的第二次渲染。

3. 逐步分析 useEffect 的执行时序

让我们结合提供的代码示例，详细分析在用户未登录 (user 为 null) 情况下，App 组件的 useEffect 和 Login 组件的 useEffect 的执行顺序。

App.js

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useAuthContext } from './hooks/useAuthContext'
import { useEffect }from 'react'

// pages & components
import Home from './pages/Home'
import Login from './pages/Login'
import Signup from './pages/Signup'
import Navbar from './components/Navbar'

function App() {
  const { user } = useAuthContext() // 假设 user 初始为 null

  useEffect(() => {
    console.log("App useffect") // [A]
  }, [])

  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <div className="pages">
        {console.log("Route main")} // [B]
          <Routes>
            <Route 
              path="/"
              element={user ? <Home /> : <Navigate to="/login" /> } // [C]
            />
            {/* ... 其他路由 */}
          </Routes>
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

Login.js

import { useEffect }from 'react'

const Login = () => {
  console.log('Login here:') // [D]

  useEffect(() => {
    console.log("Login here:' useffect") // [E]
  }, [])

  return (
        <div>Login</div>
  )
}

export default Login

执行流程分析：

1. 第一次渲染周期 (Initial Render):

   

   钉钉 AI 助理

   钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

   21

   查看详情
   • App 组件开始渲染。
   • const { user } = useAuthContext() 执行，此时 user 为 null。
   • App 组件的 return 语句执行。
   • console.log("Route main") [B] 立即打印。
   • Routes 组件内部逻辑执行，匹配 path="/"。
   • 由于 user 为 null，条件 user ? <Home /> : <Navigate to="/login" /> 导致 <Navigate to="/login" /> 被渲染。
   • <Navigate /> 组件的渲染方法执行，它立即返回 null。
   • 至此，第一次渲染周期完成，React 更新 DOM。

2. 第一次 useEffect 执行阶段:

   • DOM 更新完成后，React 检查所有组件的 useEffect 钩子。
   • App 组件的 useEffect 触发，console.log("App useffect") [A] 打印。
   • <Navigate /> 组件内部的 useEffect 触发。这个 useEffect 调用 navigate('/login')，启动实际的 URL 跳转。
   • 注意：此时 Login 组件尚未被渲染，因此其 useEffect 不会执行。

3. 第二次渲染周期 (由于导航触发):

   • navigate('/login') 导致 URL 变为 /login，这会触发整个 React 应用的重新渲染。
   • App 组件再次渲染。
   • console.log("Route main") [B] 再次打印。
   • Routes 组件内部逻辑执行，这次匹配 path="/login"。
   • element={!user ? <Login /> : <Navigate to="/" />} 评估为 <Login />。
   • Login 组件开始渲染。
   • console.log('Login here:') [D] 打印。
   • 至此，第二次渲染周期完成，React 更新 DOM。

4. 第二次 useEffect 执行阶段:

   • DOM 更新完成后，React 检查所有组件的 useEffect 钩子。
   • Login 组件的 useEffect 触发，console.log("Login here:' useffect") [E] 打印。

总结打印顺序：

1. Route main (App 第一次渲染)
2. App useffect (App 的 useEffect 执行)
3. Route main (App 第二次渲染，由 Navigate 触发)
4. Login here: (Login 组件渲染)
5. Login here:' useffect (Login 的 useEffect 执行)

这个顺序清晰地表明，App 的 useEffect 在 Login 组件被渲染之前就已经执行，这是因为 Navigate 组件本身通过其内部的 useEffect 来触发导航，从而导致了两次独立的渲染流程。

4. 关键注意事项与最佳实践

• useEffect 是后渲染执行的副作用：始终记住 useEffect 及其清理函数是在组件渲染并提交到 DOM 之后才运行的。
• 导航组件的副作用特性：<Navigate /> 或 useNavigate 钩子都是通过副作用来改变路由状态，这通常会触发一次新的渲染。
• 理解多重渲染周期：在涉及条件渲染和路由重定向的复杂场景中，组件可能会经历多个渲染周期。在调试时，区分是哪个渲染周期导致了特定的行为至关重要。
• 避免在渲染阶段执行副作用：除了 console.log 用于调试外，任何修改外部状态、发起网络请求等副作用操作都应放在 useEffect 中，以保持渲染的纯净性。
• 依赖项数组的重要性：为 useEffect 提供正确的依赖项数组，以控制其执行时机，避免不必要的重复执行或遗漏更新。

通过深入理解React的渲染机制和路由导航组件的内部工作原理，开发者可以更准确地预测组件行为，编写出健壮且高效的React应用程序。

以上就是深入理解React useEffect与路由导航组件的执行时序的详细内容，更多请关注php中文网其它相关文章！