跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >

Why A New Architecture

注意

本文档内容仍处于实验阶段，内容会随着版本的迭代进行修改。您可随时在我们的工作组的讨论区发送反馈。 此外，本文档还包含了若干需手动配置的步骤，但这不代表新架构稳定版的最终开发体验。我们仍在开发相关的工具、模板和第三方库，帮助你更快地迁移到新架构上，而非从头开始配置环境。

The goal of the New Architecture is to solve some of the issues that afflicted the Old Architecture in terms of performance and flexibility. This section provides the basic context to understand the Old Architecture limitations and how it has been possible to overcome them with the New Architecture.

This is not a technical deep dive: for further technical information, refer to the Architecture tab of the website.

Old Architecture's Issues​

The Old Architecture used to work by serializing all the data that has to be passed from the JS layer to the native layer using a component called The Bridge. The Bridge can be imagined as a bus where the producer layer sent some data for the consumer layer. The consumer could read the data, deserialize it and execute the required operations.

The Bridge had some intrinsic limitations:

  • It was asynchronous: one layer submitted the data to the bridge and asynchronously "waited" for the other layer to process them, even when this was not really necessary.
  • It was single threaded: JS used to work on a single thread, therefore the computation that happened in that world had to be performed on that single thread.
  • It imposed extra overheads: everytime one layer had to use the other one, it had to serialize some data. The other layer had to deserialize them. The chosen format was JSON, for its simplicity and human-readability, but despite being lightweight, it was a cost to pay.

New Architecture's Improvements​

The New Architecture dropped the concept of The Bridge in favor of another communication mechanism: the JavaScript Interface (JSI). The JSI is an interface that allows a JavaScript object to hold a reference to a C++ and viceversa.

Once an object has a reference to the other one, it can directly invoke methods on it. So, for example, a C++ object can now ask a JavaScript object to execute a method in the JavaScript world and viceversa.

This idea allowed to unlock several benefits:

  • Synchronous execution: it is now possibile to execute synchronously those functions that should not have been asynchronous in the first place.
  • Concurrency: it is possible from JavaScript to invoke functions that are executed on different thread.
  • Lower overhead: the New Architecture don't have to serialize/deserialize the data anymore, therefore there are no serialization taxes to pay.
  • Code sharing: by introducing C++, it is now possible to abstract all the platform agnostic code and to share it with ease between the plaforms.
  • Type safety: to make sure that JS can properly invoke methods on C++ objects and viceversa, a layer of code automatically generated has been added. The code is generated starting from some JS specification that must be typed through Flow or TypeScript.

These advantages are the foundations of the TurboModule system and a jumping stone to further enhancements. For example, it has been possible to develop a new renderer which is faster and more performant: Fabric and its Fabric Components.

Further Reading​

For a technical overview of the New Architecture, have a look at the Architecture tab.

For more information on the Fabric Renderer, have a look at the Fabric section.