React Native darkMode 上下文值需要 *forever* 重新渲染

Posted 2023-02-16

【中文标题】React Native darkMode 上下文值需要 *forever* 重新渲染

【英文标题】：React Native darkMode context value takes *forever* to rerender

【发布时间】：2021-12-31 20:04:27

【问题描述】：

我有一个带有抽屉和堆栈的 React Native Navigation 的 react native 项目。我已经按照我认为应该设置的方式设置了所有内容，并且在技术上一切正常。但是，当我导航并填充堆栈和抽屉时，当我将“暗模式”变量切换为真或假时，屏幕最多需要 3 秒才能反映更改。我可以做一些优化来确保它立即发生吗？

我不能分享我的代码本身，但如果你有一个起点，我可以用伪代码来说明我是如何设置它的。我希望只有一些关于 RN 的部落知识，我不知道让它立即渲染。提前致谢！

【问题讨论】：

如何更新导航主题/其他主题上下文？还请检查是否有任何 js 线程/ui 线程阻塞与 pref。监视器。

我真的需要更好地分析性能监视器。

有没有一个好地方可以开始寻找线程阻塞任务？哪些任务在通常阻塞的主线程上运行？抱歉 - 我是 RN 新手。

【参考方案1】：

我能想到的是

更改被另一个繁重的任务阻止 ui 更改正在后台线程中运行 一些useEffect的依赖设置错误 页面不在主题上下文提供程序中

对于案例 1， 正如你没有提到的那样，我认为没有任何繁重的任务正在运行。

---

案例 2，react native 是原生的单线程。因此，如果您没有对本机代码/任何线程库做任何事情，我认为情况并非如此。

---

所以，我建议你检查依赖关系和主题上下文。

【讨论】：

没有繁重的任务，因为 fetch（唯一繁重的事情）没有再次运行（我在调用中放置了控制台日志）。更改一些背景颜色和文本只需 3 秒钟。我被难住了。

【参考方案2】：

我不确定这有多相关，但由于内存泄漏，在实现大量 useEffects 和 useStates 时，我遇到了巨大的延迟峰值。 （在运行代码之前不检查数据是否已经存在于 useEffects 中）在实现 sqLite 并放弃状态之后它变得更好但仍然继续，暗模式上下文本身不应该让你慢下来，所以我猜它会重新渲染你的部分应用程序。 如果您通过上下文将新对象向下传递到组件结构中，它将导致重新渲染，所以如果您还没有实现它，我想 useMemo 是一个不错的起点。

【讨论】：

如果我将控制台日志放入我的提取中，它就不会再次被调用（这就是我如此困惑的原因）。它是在一个useEffect中，但是当我添加日志时它不会调用它们，所以它们不会被召回。这就是为什么它对我来说如此奇怪。