React Native面试题2025——新技术与发展趋势(12)

一 概述

1. React Native 中的 Fabric 和 TurboModules 是什么？它们如何优化性能？
2. 请简述 React Native 与 React 18 中的 Concurrent Mode（并发模式）相关的特性，以及它如何提升应用性能？
3. Expo 与 React Native 的区别是什么？何时选择使用 Expo？

二 面试题解答(仅供参考)

2.1 React Native 中的 Fabric 和 TurboModules 是什么？它们如何优化性能？

Fabric 和 TurboModules 是 React Native 中用于提升性能的重要技术，
它们分别在 UI 渲染和原生模块通信方面进行优化。

一、Fabric
Fabric 是 React Native 的新 UI 渲染引擎，旨在提升应用的渲染性能和流畅度。
它通过以下方式优化性能：
1.1 异步渲染：Fabric 引入了异步渲染模式，使得 UI 渲染过程不会阻塞主线程，从而提高应用的响应速度和流畅度。
1.2 更高效的组件更新：
它使用了类似于 React 18 中的 Concurrent Mode，优化了组件的更新和重新渲染过程，减少不必要的计算和渲染。
1.3 更轻量的桥接：Fabric 在底层优化了与原生模块的交互，减少了数据传输和处理的开销。

二、TurboModules
TurboModules 是 React Native 中的一个新特性，旨在优化原生模块的加载和调用性能。
传统的原生模块通过 JavaScript 和原生代码之间的桥接进行通信，但这种方式存在性能瓶颈。
TurboModules 通过以下方式进行优化：

2.1 按需加载：TurboModules 只在需要时加载原生模块，避免了传统方式中所有模块都需要加载的性能开销。
2.2 直接通信：
通过 C++ 原生代码，TurboModules 能够直接与原生代码进行通信，
减少了桥接和数据序列化的开销，提升了原生模块的调用性能。
2.3 异步通信：TurboModules 采用异步通信方式，避免了主线程阻塞，提升了响应速度。

三、性能优化总结
-Fabric 优化了 UI 渲染，使得应用更加流畅、响应更快。
-TurboModules 优化了 原生模块的通信，提升了与原生代码交互的性能，减少了不必要的性能损耗。

这两者的结合，使 React Native 能够更高效地处理渲染和原生模块调用，极大提升了应用的性能表现。

2.2 请简述 React Native 与 React 18 中的 Concurrent Mode（并发模式）相关的特性，以及它如何提升应用性能？

React Native 和 React 18 中的 Concurrent Mode（并发模式） 都引入了许多性能优化特性，
旨在提高应用的响应性和流畅度。
以下是这些特性的简要描述及其性能提升机制：

一、Concurrent Mode（并发模式）
Concurrent Mode 是 React 18 引入的一个重要功能，它允许 React 在多个任务之间分配时间，
从而使得应用更具响应性，尤其是在复杂应用中。
它的核心思想是使 UI 渲染不再阻塞用户交互，而是将渲染工作分散到多个时间片段中，避免长时间的渲染卡顿。

二、React 18 中的并发特性
2.1 自动批处理（Automatic Batching）：
React 18 自动将多个状态更新合并为一个批次进行渲染，减少了不必要的渲染，提高了性能。

2.2 优先级调度（Prioritized Rendering）：
React 18 可以根据任务的重要性分配不同的优先级，确保高优先级的任务（如用户交互）优先执行，
而低优先级的任务（如后台数据更新）则延后执行。

2.3 Suspense 的改进：
React 18 中的Suspense进一步优化了异步数据的处理，允许组件在加载数据时显示加载状态，而不是阻塞整个UI渲染。
这有助于提升应用的响应速度。

2.4 Concurrent Rendering（并发渲染）：
通过并发渲染，React 可以在后台渲染 UI，而不会阻塞主线程的其他任务。
它可以在不打断用户交互的情况下，逐步完成 UI 渲染。

三、如何提升应用性能
3.1 流畅的用户体验：并发模式可以确保应用在繁重的渲染任务时仍能保持流畅，避免了长时间的 UI 阻塞和页面卡顿。
3.2 更好的响应性：
通过调度优先级，React 可以保证高优先级的交互任务（如点击、滚动等）得到快速响应，
而低优先级的任务可以推迟执行。
3.3 节省资源：自动批处理和优先级调度减少了不必要的渲染次数，提高了资源利用率。

四、React Native 中的并发模式
虽然 React Native 目前尚未完全支持 React 18 中的并发模式，
但通过 Fabric 和 TurboModules 等特性，React Native 在原生模块的通信和 UI 渲染方面已经有了很大提升。

4.1 Fabric 渲染引擎：通过将 UI 渲染引擎进行异步化和优化，Fabric 提高了 React Native 的渲染效率。
4.2 TurboModules：优化了原生模块的加载与调用，减少了阻塞，提升了响应速度。

总结
-React 18 的 并发模式 通过 优先级调度、自动批处理 和 Suspense 等特性，极大提升了渲染性能和响应性。
-React Native 通过 Fabric 和 TurboModules 优化了 UI 渲染和原生模块通信，提升了整体性能。
-两者的结合使得复杂的 UI 更新和交互变得更加流畅，提升了用户体验。

2.3 Expo 与 React Native 的区别是什么？何时选择使用 Expo？

一、概念

Expo 和 React Native 都是用于构建跨平台应用的框架，但它们在开发流程、功能和灵活性上有一些区别。

一、Expo 与 React Native 的区别
1.1 Expo：
-是一个开箱即用的工具集，提供了一套封装好的 API 和开发环境，简化了 React Native 开发的复杂性。
-无需配置：Expo 提供了许多常用的原生功能（如摄像头、位置、推送通知等），无需进行原生模块的配置和编译。
-快捷开发：内置开发工具（如 Expo Go 应用），可以快速预览和调试应用。
-限制：Expo 的功能是封装的，虽然可以通过 eject 转换为原生 React Native 项目，
但一旦 eject，开发的自由度和灵活性会有所下降。

1.2 React Native：
-是一个更底层的框架，提供更大的灵活性，允许开发者完全控制应用的原生代码。
-需要配置：开发者需要手动设置和配置原生代码（如 Android 和 iOS 项目），以及集成原生模块。
-更高的自由度：可以自由选择使用各种原生库和模块，支持复杂的自定义需求。

二、何时选择使用 Expo
选择 Expo 主要适用于以下场景：

2.1 快速原型开发：
如果你需要快速构建一个简单的跨平台应用，Expo 提供了许多预配置的工具和功能，能够快速启动项目。

2.2 不需要复杂的原生功能：
如果你的应用不依赖于复杂的原生模块（如自定义原生 UI 组件、硬件功能等），Expo 是一个很好的选择。

2.3 初学者：
对于初学者，Expo 提供了一个简化的开发环境，避免了繁琐的配置和调试过程，
能够更专注于 JavaScript 和 React 的学习。

2.4 快速迭代和测试：通过 Expo Go 应用，开发者可以迅速预览和调试应用，提升开发效率。

三、何时选择使用 React Native
选择原生 React Native 主要适用于以下场景：

3.1 需要自定义原生代码：
如果应用中涉及到自定义的原生功能（如与原生库交互、实现自定义原生模块等），React Native 提供更大的灵活性。

3.2 更高的性能要求：对于一些性能要求较高的应用，React Native 允许更精细的控制，能进行更多的性能优化。
3.3 长期维护:如果你计划长期开发一个复杂的应用，并且需要更多的原生功能支持，那么直接使用React Native会更合适。

二、表格

特性	Expo	React Native
开发流程	快速上手，无需配置	需要更多配置和原生代码管理
灵活性	封装性较强，功能受限	高度灵活，支持所有原生功能
开发效率	高，内置工具和库	低，需要手动配置和集成
适用场景	快速原型开发、简单应用、初学者	复杂应用、需要自定义原生功能或优化的应用

三、总结

简而言之，如果你的项目需求简单，且希望快速开发，选择 Expo 会更方便；
如果需要更多自定义和灵活性，或者项目较为复杂，选择 React Native 更合适。