React Native 架构详解

React Native 是个非常复杂项目，主要涉及到五种不同的语言构建：Javascript、Objective-C、Java、C++、C。

最重要的无疑 Javascript 这部分承载了 React Native 中一些上层的 API 实现，Java 和 Objective-C 主要用来实现原生组件和原生方法，以及一些「桥接」部分实现。C++ 和 C 部分则主要是「桥接」部分实现和布局实现。

这是 React Native 极简的架构图，从上到下是 React，React Native，Native 三层。

• React 包含了虚拟 Dom 和虚拟 Stack 两个核心算法，同时负责渲染器的 JS 层实现。
• React Native 一方面作为 JS 层和原生方法和原生界面的中间媒介，另一方面也通过 yoga 解决了通过 JS 层传来的布局参数进行实际布局计算。
• Native ，也就是原生界面和原生方法是 iOS 和 Android 系统相关的。

看到这里，我们有几个最核心的关注点和疑问需要回答：

1. JS 层是怎么「操作」Native 层的原生方法的？
2. Native 的事件如何传递到 JS 层的事件处理器的？
3. JS 层，React 中的 JSX 是如何最终渲染成原生界面的？当 React 组件的 state 和 props 变化的时候是如何触发界面「刷新」并最终「刷新」了原生界面的？
4. yoga 是怎么根据 JSX 中的 style 属性计算布局的？又是如何设置在原生界面中的？

只要回答了这几个问题，我们就可以揭开 React Native 和 React 神秘的面纱，一窥究竟了。本章作为导引，将会回答问题 3，扩展 React Native 一章讲会详细的讨论问题 1 和 2。React Naitve 布局一章将会回答问题 4。