React Native与原生模块、组件之间的关系浅析

前言

React Native的一大特点就是用户界面其实都是由原生组件所组成。JavaScript编写的React组件仅仅作为原生视图的抽象表现以及配置。所有React组件最后都会被渲染成原生UI组件。这使得我们可以使用熟悉的JavaScript和React让用户界面开发变得很简单。

React Native还提供了许多暴露为NativeModules的库，来调用原生的API。这些方法可以让JavaScript调用，或者传播事件让JavaScript监听。原生模块函数从JavaScript端接收参数，经过桥接层后，参数被处理成恰当的类型并且可以直接使用。

本篇试图探究原生组件和原生模块的架构方式，以及如何开发它们。

原生组件

当React Native开始渲染一个界面时，原生层会建立与该界面结构一样的镜像。桥接层把规则（组件属性）从React Native所描绘的UI层传递给原生层。最终在屏幕上看到的，就是React组件转译成相应原生组件的结果。以下我们将探究：
- ViewManager(“视图管理器”)如何管理原生UI组件;
- React组件属性如何传递给在原生层定义的函数并选择处理方式。

React Native中的JSX语法类似于我们所熟悉的React虚拟DOM，它就是用来编写设置原生视图的配置文件。

每一个JSX元素都与其所代表的原生组件的实例绑定到一起。两者总是与对方保持同步，React组件定义页面结构，原生UI组件就渲染出对应的UI结构。

React Native创建UI组件的过程概述:

React Native所创建的组件挂载之后，通知原生层根据页面结构绘制节点。UI组件的实例被创建。每个实例分配了一个标识符，并与JavaScript层共享。从此刻起，只要这些视图的属性发生了改变，或者将它们从屏幕上移除，这些改变集合会根据它们的身份（组件ID）和改变内容（任意属性）通知给原生层，原生层就会按照JavaScript层传来的信息调整布局。

剖析原生组件

一个原生组件主要由两部分组成：ViewManager ，以及实际的UI组件。

ViewManager扮演的角色负责连接React组件以及该组件代表的原生UI组件实例。ViewManager 是单例模式，对于指定的组件类型只有唯一一个视图管理器，它管理着指定类型的所有组件。

React组件挂载之后就会触发它的render方法，并返回它所维护的JSX组件树。这些树节点根据它们的类型被发送给对应的ViewManager（比如 节点会被发送给处理View实例的管理器）。元素的视图管理器创建出React组件代表的原生组件实例。如果该组件拥有属性，这些属性将由ViewManager 的函数接收，用来创建符合这些属性的原生组件实例。当属性发生变化后会进行同样的过程。

现在假设我们创建一个自定义的原生组件TestView:

class TestView extends View {
   
    ...
}

在React Native端，它将显示成<TestView/>元素。

接下来我们就需要给TestViewh创建一个ViewManager。

/**
 * 控制TestView的TestViewManager类
 */
class TestViewManager extends SimpleViewManager<TestView>{
   
    @Override
    public String getName();

    @Override
    protected TestView createViewInstance (ThemedReactContext context);

    @ReactProp(name = "someProp")
    public vo