以下是关于 React Native 底层原理的常见面试题及其答案，涵盖核心概念、通信机制、性能优化等关键点：
1. React Native 如何实现 JavaScript 与原生代码的通信？
React Native 通过 Bridge（桥接机制）实现 JS 与原生（Android/iOS）的异步通信：
- JS 线程：运行 JavaScript 代码（基于 JavaScriptCore 引擎）。
- 原生线程：运行平台原生代码（Java/Kotlin 或 Objective-C/Swift）。
-
通信方式：
- 异步序列化：数据通过 JSON 格式序列化，通过 Bridge 双向传递。
-
模块映射：原生模块需提前注册，JS 端通过
NativeModules调用。 -
事件驱动：原生端可通过
RCTEventEmitter向 JS 发送事件。
优化方向：新架构（Fabric）使用 JSI（JavaScript Interface）替代 Bridge，允许直接同步调用。
2. 解释 React Native 新架构（Fabric + JSI + TurboModules）的改进
-
JSI（JavaScript Interface）：
- 替代旧的 Bridge，允许 JS 直接调用原生方法（无需序列化）。
- 使用 C++ 实现，支持同步/异步通信。
-
Fabric：
- 新的渲染系统，将 UI 组件的创建和更新直接映射到原生视图树。
- 减少通信开销，提升渲染性能。
-
TurboModules：
- 延迟加载原生模块，启动时只加载必要模块，加快启动速度。
优势：性能更高、内存占用更低、启动更快。
3. React Native 如何将 React 组件渲染为原生 UI？
-
JSX 转换为虚拟 DOM：React 组件通过
React.createElement生成虚拟 DOM。 - Shadow Tree：React Native 的渲染器（如 Fabric）生成一个跨平台的轻量级 Shadow Tree（用 Yoga 布局引擎计算布局）。
-
原生视图映射：Shadow Tree 的计算结果传递给原生端，由原生端（如
UIManager）创建对应的UIView或ViewGroup。
关键点：Yoga 负责跨平台布局计算，确保 Android/iOS 表现一致。
4. 什么是“线程模型”？React Native 有哪些主要线程？
React Native 默认运行在三个线程：
- JS 线程：执行 JavaScript 代码和业务逻辑。
- UI 线程（主线程）：处理原生 UI 渲染和用户交互。
- 原生模块线程：运行原生模块（如网络请求、文件操作）。
注意：所有跨线程通信都是异步的，避免阻塞主线程。
5. 如何优化 React Native 应用的性能？
- 减少 Bridge 通信：批量操作、避免频繁调用原生模块。
- 使用 Hermes 引擎：提升 JS 执行效率，减少启动时间。
- 内存优化：释放不必要的原生组件引用（如图片缓存）。
-
列表优化：使用
FlatList或FlashList实现虚拟化渲染。 - 原生代码优化：复杂计算移至原生端（如动画）。
6. 为什么 React Native 需要 Metro 打包器？它与 Webpack 有何不同？
-
Metro 是专为 React Native 设计的打包器，特点包括：
- 默认支持 Babel 转换和 React 语法。
- 增量构建（开发模式快）。
- 生成单个 JS Bundle 文件（
index.bundle）。
-
与 Webpack 区别：
- Metro 更轻量，针对 RN 的移动端场景优化，不支持动态加载（如 Webpack 的
require.ensure）。
- Metro 更轻量，针对 RN 的移动端场景优化，不支持动态加载（如 Webpack 的
7. 解释 Hot Reloading 和 Live Reloading 的区别
-
Hot Reloading：
- 保留应用状态，仅替换修改的组件文件。
- 依赖 React 的组件树复用机制。
-
Live Reloading：
- 重新加载整个应用，状态重置。
8. 如何处理 React Native 中的原生依赖冲突？
-
Android：通过
gradle排除冲突依赖（如exclude group）。 -
iOS：使用 CocoaPods 的
:conflict => :override或手动调整Podfile。
9. 为什么推荐使用函数组件 + Hooks 而非 Class 组件？
- 性能：函数组件更轻量，避免类实例化开销。
-
Hooks 优势：
-
useMemo/useCallback减少不必要的渲染。 - 逻辑复用更灵活（自定义 Hooks）。
-
10. React Native 如何调试？有哪些工具？
-
Chrome DevTools：调试 JS 代码（
debugger语句）。 - Flipper：查看网络请求、数据库、日志等。
- React DevTools：检查组件树和状态。
- 原生工具：Android Studio（Logcat）、Xcode（Console）。
