广州制作公司网站的公司濮阳做网站做的好的公司

广州制作公司网站的公司,濮阳做网站做的好的公司,谷歌搜索引擎seo,黄梅戏网页制作素材网罗开发 #xff08;小红书、快手、视频号同名#xff09; 大家好#xff0c;我是 展菲#xff0c;目前在上市企业从事人工智能项目研发管理工作#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术#xff0c;包括iOS、前端、Harmony OS、Java、Python等…网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。 公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。 微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。 最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录摘要一个非常常见但危险的认知误区页面存在 ≠ 页面可见这句话到底什么意思一个简单对照表RN 页面真实生命周期拆解常见生命周期触发顺序隐藏 Bug 场景一useEffect 在页面不可见时仍然执行问题示例代码实际效果focus / blur 和 mount / unmount 的本质区别mount / unmount 关注的是“组件是否存在”focus / blur 关注的是“页面是否当前活跃”可运行 Demo不可见页面触发副作用示例页面结构错误示例只依赖 useEffect运行现象正确做法用 focus 来管理副作用改造后的示例代码这个写法的核心优势隐藏 Bug 场景二页面状态的“幽灵更新”场景描述问题示例实战建议副作用管理的几条铁律1. 只要和“页面可见性”有关一定不要只用 useEffect2. 网络请求也要区分“是否仍然关心结果”3. 不要指望“页面切走了就会 unmount”总结摘要在 React Native 项目里很多开发者都会默认认为只要页面不在当前屏幕上就等同于“不存在”。但现实往往刚好相反——页面可能已经不可见了但它还活得好好的。这类误判通常会带来一些非常隐蔽、非常难排查的问题比如页面切走了useEffect里的逻辑还在跑网络请求、定时器、轮询在后台偷偷执行状态被更新了但 UI 不可见回到页面直接“状态错乱”某些 Bug 只有多次跳转页面后才出现这篇文章我们就专门聊清楚一件事在 RN 中“页面存在”和“页面可见”到底有什么区别以及这些区别会带来哪些坑。一个非常常见但危险的认知误区很多 RN 项目一开始页面结构都很简单A 页面 → B 页面 → 返回 A 页面直觉上你可能会认为跳到 B 页面时A 页面已经“销毁”所有副作用自然就停了但在真实的 RN Navigation 里默认并不是这样。大多数导航库尤其是 react-navigation默认行为是页面被压入栈中页面组件仍然处于 mounted 状态只是“不可见”而不是 unmount这就埋下了隐患。页面存在 ≠ 页面可见这句话到底什么意思我们先用一句话把概念说清楚页面存在mounted组件还在内存里状态还在副作用也可能在跑页面可见focused页面当前是否处于用户正在看的那个状态这两者在 RN 里是两个完全不同的维度。一个简单对照表状态页面是否在内存useEffect 是否存在用户是否可见mount focus是是是mount blur是是否unmount否否否最容易出问题的就是mount blur 这一档。RN 页面真实生命周期拆解我们结合 react-navigation 来看一个典型页面的生命周期。常见生命周期触发顺序页面第一次进入组件mountuseEffect(() {}, [])执行页面focus跳转到下一个页面当前页面blur组件仍然 mounted返回当前页面页面重新focus不会重新 mount如果你只在useEffect里写逻辑很可能会忽略第 2、3 步。隐藏 Bug 场景一useEffect 在页面不可见时仍然执行先看一个非常常见的写法。问题示例代码useEffect(() { const timer setInterval(() { console.log(polling...); }, 3000); return () { clearInterval(timer); }; }, []);这个代码乍一看没问题有定时器有清理逻辑但问题在于只有在组件 unmount 时清理函数才会执行页面只是 blur 时并不会触发 cleanup实际效果页面 A 启动定时器跳转到页面 B页面 A 的定时器仍在后台执行多次进出页面定时器可能叠加这在真实项目中非常容易导致CPU 占用升高网络请求数量异常页面切换越多越卡focus / blur 和 mount / unmount 的本质区别这是理解整个问题的关键。mount / unmount 关注的是“组件是否存在”React 层级概念决定 state、effect 是否存在focus / blur 关注的是“页面是否当前活跃”Navigation 层级概念决定是否应该执行业务逻辑业务副作用请求、定时器、订阅往往更关心 focus而不是 mount。可运行 Demo不可见页面触发副作用下面这个 Demo 可以非常直观地感受到问题。示例页面结构HomeScreenDetailScreen从 Home 跳到 Detail再返回 Home。错误示例只依赖 useEffectfunction HomeScreen() { useEffect(() { const timer setInterval(() { console.log(Home polling...); }, 2000); return () { console.log(Home cleanup); clearInterval(timer); }; }, []); return ( View TextHome/Text /View ); }运行现象进入 Home开始打印跳到 Detail仍然在打印多次来回日志越来越多正确做法用 focus 来管理副作用react-navigation 提供了非常关键的 APIuseFocusEffect。改造后的示例代码import { useFocusEffect } from react-navigation/native; import { useCallback } from react; function HomeScreen() { useFocusEffect( useCallback(() { const timer setInterval(() { console.log(Home polling...); }, 2000); return () { console.log(Home blur cleanup); clearInterval(timer); }; }, []) ); return ( View TextHome/Text /View ); }这个写法的核心优势页面 focus 时启动副作用页面 blur 时立即清理不依赖组件是否 unmount这才是真正符合“页面是否可见”的业务语义。隐藏 Bug 场景二页面状态的“幽灵更新”还有一种非常隐蔽的问题比定时器更难发现。场景描述页面 A 发起请求用户立刻跳到页面 B请求返回后更新了页面 A 的 state用户再返回 A发现 UI 状态“突然变了”问题示例useEffect(() { fetchData().then(res { setData(res); }); }, []);如果这个请求发生在页面 blur 期间UI 不可见状态却被更新了用户完全不知道发生了什么这类问题通常表现为页面“偶发性错乱”数据更新时机不可预测很难通过日志复现实战建议副作用管理的几条铁律结合真实项目经验给你几条非常实用的原则。1. 只要和“页面可见性”有关一定不要只用 useEffect包括但不限于轮询请求WebSocket 订阅定时器动画启动传感器监听优先考虑useFocusEffect。2. 网络请求也要区分“是否仍然关心结果”可以在 blur 时做中断或忽略。useFocusEffect( useCallback(() { let active true; fetchData().then(res { if (active) { setData(res); } }); return () { active false; }; }, []) );3. 不要指望“页面切走了就会 unmount”除非你明确配置了unmountOnBlur: true或使用了替代导航方案否则默认都还活着。总结在 RN 项目里有一句话你一定要记住页面不在屏幕上并不代表它已经死了。一旦你把“页面存在”和“页面可见”混为一谈就很容易踩到这些坑副作用偷偷运行状态幽灵更新性能问题随使用时间累积Bug 难复现、难定位解决问题的关键不是写更多 cleanup而是用对生命周期维度。