ReactNative源码解析-初识源码

栏目: IOS · Android · 发布时间: 4年前

内容简介:在开始《ReactNative源码解析》系列文章之前,我们先不对源码做深入的分析,我们先对源码的结构和ReactNative的框架做个简要的分析和了解,我们将围绕它的核心进行展开。好,我们先来看第一个问题。ReactNative源码结构如下:

在开始《ReactNative源码解析》系列文章之前,我们先不对源码做深入的分析,我们先对源码的结构和ReactNative的框架做个简要的分析和了解,我们将围绕它的核心进行展开。

1. ReactNative框架是怎样的?
2. ReactNative框架的核心是什么,如何去分析?
复制代码

好,我们先来看第一个问题。

一、ReactNative框架总览

ReactNative源码结构如下:

ReactNative源码解析-初识源码
- jni:ReactNative的核心机制都是由C、C++实现的,这部分便是用来载入SO库。
- perftest:测试配置
- proguard:混淆
- react:ReactNative Java层源码部分,我们将对这些源码进行重点分析。
- systrace:system trace
- yoga:facebook开源跨平台的布局引擎
复制代码

ReactNative系统框架图如下所示:

ReactNative源码解析-初识源码

二、ReactNative框架的核心

通过对ReactNative系统框架的分析,我们可以发现源码的核心如下:

1、ReactNative启动流程
2、ReactNativeUI渲染
3、ReactNative通信机制(Java调用JS,JS调用Java)
4、ReactNative事件处理
5、ReactNative线程模型
复制代码

后面的文章将按照此顺序对ReactNative框架展开深入分析,在分析之前,我们先来理解一下关于ReactNative的重要概念。

三 ReactNative框架的重要概念

1、ReactContext

ReactContext继承于ContextWrapper,是ReactNative应用的上下文;可以简单理解它和Android中的Context是一个概念,是整个应用的上下文。
复制代码
ReactNative源码解析-初识源码

从类图中可以看出继承关系,有没有发现和Android中的context继承关系很像呢?应了那句话,好的设计总是相似的。

2、ReactInstanceManager
ReactInstanceManager是ReactNative应用总的管理类,创建ReactContext、CatalystInstance等类,解析ReactPackage生成映射表,并且配合ReactRootView管理View的创建与生命周期等功能。
复制代码

3、CatalystInstance

CatalystInstance是ReactNative应用 Java 层、C++层、JS层通信总管理类,总管Java层、JS层核心Module映射表与回调,三端通信的入口与桥梁。

复制代码

4、NativeToJsBridge/JsToNativeBridge

NativeToJsBridge是Java调用JS的桥梁,用来调用JS Module,回调Java。
JsToNativeBridge是JS调用Java的桥梁,用来调用Java Module。
复制代码

5、JavaScriptModule/NativeModule

JavaScriptModule是JS Module,负责JS到Java的映射调用格式声明,由CatalystInstance统一管理。
NativeModule是ava Module,负责Java到Js的映射调用格式声明,由CatalystInstance统一管理。
JavaScriptModule:JS暴露给Java调用的API集合,例如:AppRegistry、DeviceEventEmitter等。业务放可以通过继承JavaScriptModule接口类似自定义接口模块,声明 与JS相对应的方法即可。
NativeModule/UIManagerModule:NativeModule是Java暴露给JS调用的APU集合,例如:ToastModule、DialogModule等,UIManagerModule也是供JS调用的API集 合,它用来创建View。业务放可以通过实现NativeModule来自定义模块,通过getName()将模块名暴露给JS层,通过@ReactMethod注解将API暴露给JS层。 
复制代码

6、JavascriptModuleRegistry

JavascriptModuleRegistry是JS Module映射表,NativeModuleRegistry是Java Module映射表
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Design DeMYSTiFieD

Web Design DeMYSTiFieD

Willard, Wendy / 2010-11 / $ 24.86

Website Design just got a whole lot easier! This title helps you to learn the latest website development tools, techniques, and best practices. "Web Design Demystified" provides the hands-on help you ......一起来看看 《Web Design DeMYSTiFieD》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具