React Native中首次渲染的定义及导航后不触发的原因咨询

首次渲染的定义 #

React Native 中，组件的**首次渲染（first render）**指的是组件实例第一次被创建并挂载到应用的组件树中，完成原生视图初始化与渲染的过程，这个过程仅会在组件首次挂载时发生一次。

你的测试场景解析 #

你在 login.js 中使用的空依赖 useEffect：

//login.js
useEffect(() => {
    console.log('first render');
}, []);

这个钩子的核心特性是仅在组件挂载完成后执行一次，后续除非组件经历“卸载→重新挂载”的流程，否则不会再次触发。

在你的导航流程 login.js → home.js → login.js 中，以 React Navigation 栈导航为例：当从 login 跳转到 home 时，login 组件并未被卸载，只是被压入导航栈后台；当你从 home 返回 login 时，login 组件只是从后台回到前台，没有经历卸载后重新挂载的过程，因此空依赖的 useEffect 不会再次执行，也就不会打印日志。

本质上这和导航历史无关，而是因为 login 组件没有被重新挂载，所以这次返回后的渲染不属于“首次渲染”范畴。

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