这一章不是把
React面试题换一套组件名,而是围绕真实React Native岗位常见要求展开:能写跨端业务、理解运行原理、能和iOS/Android原生协作、能定位性能与发布问题。
# 1 基础与选型
# React Native 到底是什么,和写 React Web 差在哪?
⚡ 30 秒速记
- 复用的是
React的组件 + 状态 + 协调模型,宿主换成了iOS/Android原生视图,不是DOM View→UIView/android.view.ViewGroup,Text→ 原生文本控件;裸字符串不包Text直接报错- 布局交给
C++写的Yoga算,样式是JS对象,只有RN支持的那部分属性,没有选择器和级联 - 新架构(
0.76起默认):JSI直接调C++,Fabric渲染,TurboModules按需加载,老的异步Bridge退场 - 热更新只能换
JS包和图片,加原生SDK、改权限声明必须重新发版
React Native 说白了就是 React 换了一个渲染目标:组件、state、diff 那一套照旧,但最后挂上去的是原生控件,不是浏览器 DOM。 所以 div、span、window、document 统统没有,文字必须放进 Text,样式是驼峰对象,默认还是纵向排列。从 0.76 开始新架构默认开启,JS 通过 JSI 直接和 C++ 层打交道,不再走以前那条异步序列化的 Bridge。业务逻辑、请求、状态管理基本能和 Web 共用,但权限、推送、前后台切换这些得按原生的规矩来。
# 一次更新从 setState 到屏幕
React 本身只负责算出「界面应该长什么样」,真正落地交给渲染器:Web 上是 react-dom,RN 里是 Fabric(老架构叫 Paper)。新架构下一次更新大致分三段:
- 渲染:
React执行组件拿到React Element Tree,渲染器在C++里生成对应的Shadow Tree,每个节点记录类型、props和样式。 - 提交:
Yoga对Shadow Tree算布局,得到每个节点的位置和尺寸,新树被标记为「下一棵要挂载的树」。 - 挂载:在主线程(
UI线程)上把新旧树的差异变成原生视图的增删改,比如创建一个UIView、改一个TextView的文字。
全程没有 DOM,也没有浏览器那种样式计算。老架构里 JS 线程和原生之间靠 Bridge 传 JSON 消息,全异步、要序列化,大列表快速滚动时容易丢帧;新架构的 JSI 让 JS 能直接持有 C++ 对象的引用,可以同步调用,Fabric 也因此能支持 React 18 的并发特性。版本上记几个节点就够:0.68 能手动开新架构,0.76 默认开启,0.82 起老架构已经关不回去了;引擎方面 Hermes 从 0.70 起是默认 JS 引擎。