React Native 新架构实战课
蒋宏伟
58 同城前端架构师,58RN 负责人
18214 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
React Native 新架构实战课
15
15
1.0x
00:00/00:00
登录|注册

31|多线程:RN底层是如何保障交互体验的?

你好,我是蒋宏伟。
在上一讲中,我们主要介绍的是 JavaScript 引擎,而 React Native 的一大特点,就是为执行 JavaScript 脚本单独开了一个异步线程。
和任何其他应用一样,React Native 应用也需要处理并行任务,比如,在用户滚动页面的时候,不仅要处理用户的滚动手势,并需要将页面绘制到新位置上,与此同时,还可能需要发起新的请求和做一些局部的渲染。只有单个线程时,处理任务就需要排队,前一个没完成,后一个就需要等待,这就容易导致交互的卡顿。
这一讲中,我们会围绕着 React Native 的多线程进行介绍,并会重点介绍新架构是如何改善交互体验的。

进程和线程

任何 React Native 应用,都是一个多线程的应用,这是由其架构设计的特点所决定的。
应用、进程、线程这些计算机的概念,关联性很强,也容易弄混。明确这些概念,有利于我们去理解 React Native 的多线程架构,因此我们借用微软给出的关于应用、进程和线程的定义,来回忆一下这些熟悉的概念。
一个应用由一个或多个进程组成。一个进程,用最简单的话说,就是一个正在执行的程序,该程序的上下文中运行着一个或多个线程。一个线程是操作系统分配处理器时间的基本单位,一个线程可以执行进程代码的任何部分,包括目前正在被另一个线程执行的部分。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React Native 应用采用了多线程渲染机制,包括主线程、JavaScript 线程和背景线程,以及其他独立线程。不同线程处理不同优先级的渲染任务,保障了渲染体验。在主线程中渲染的流程简单,但可能导致卡顿;而在背景线程中渲染则降低了主线程卡顿的问题。React Native 的新架构默认采用三线程异步渲染,对于高优先级的渲染任务可采用同步渲染。这种设计使得即便 JavaScript 任务执行时间过长,主线程依旧可以同时响应用户的操作,提高了交互体验的保障。在特定场景下,提高交互事件优先级,使用主线程同步渲染,也是一种有效的手段。相比于“双线程”的异步渲染模型,三线程异步渲染的优势在于能够更好地处理不同优先级的渲染任务,提高了用户体验。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Native 新架构实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • Wcly👺
    “从源码中,可以看到 ShadowQueue 线程的名字叫做 com.facebook.react.JavaScript。”这里写错了,应该是“com.facebook.react.ShadowQueue”
    2023-01-05归属地:广东
    1
    5
  • 解念念
    React Native 可以被设计成只使用 JavaScript 线程和主线程的“双线程”异步渲染模型。这种模型可以在保持应用性能的同时简化应用的开发和调试过程。 相对于“双线程”的异步渲染模型,三线程的异步渲染模型具有以下优势: 1. 更好的性能:三线程模型可以将渲染和计算任务分离到不同的线程中,从而提高应用的性能和响应速度。 2. 更好的稳定性:三线程模型可以更好地处理多个线程之间的竞争和资源占用问题,从而提高应用的稳定性和可靠性。 3. 更好的灵活性:三线程模型可以更好地支持多线程的应用程序,从而提高应用的灵活性和可扩展性。 总之,三线程模型相对于“双线程”模型具有更好的性能、稳定性和灵活性。但是,实现三线程模型会增加开发和维护的难度,需要更多的工作量和技术知识。因此,在实际应用中,需要根据具体需求和技术能力来选择适合的异步渲染模型。
    2023-03-10归属地:上海
    1
    3
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部