1. The Concept of the Renderer: React's True Secret
React's architecture is divided into two main parts:
- Reconciler: The core that asks the question "What changed?", housing the Virtual DOM and the Fiber engine.
- Renderer: The unit that takes the changes found by the Reconciler and translates them into the language of the target platform.
In the web world, this renderer is the react-dom package, which translates changes into HTML elements (DOM nodes). In the mobile world, however, react-native takes the stage.
When you write a <View> or <Text> component, React Native maps these components at runtime to UIView and UITextView objects for iOS, and to ViewGroup and TextView objects for Android. So, how is this communication achieved?
2. The Old Architecture and "The Bridge" Problem
Prior to 2022, a communication channel called The Bridge lay at the heart of React Native.
The JavaScript world (your code) and the Native world (the iOS/Android operating system) were like people living on two different islands who couldn't understand each other's language. To communicate, they had to exchange messages in JSON format.
A Metaphor: Sending a Telegram When a button is pressed on the JavaScript side, this action would be converted into a text-based JSON object (Serialization), sent across the bridge to the other island (Native), and there it would be parsed back (Deserialization) to be processed.