ReactNative源码篇:源码初识
ReactNative源码篇:源码初识作者: 郭孝星 关于作者
关于文章
文章目录:https://github.com/guoxiaoxing/react-native-android-container/blob/master/README.md
源码地址:https://github.com/facebook/react-native 源码版本: 本篇文章是《ReactNative源码篇》的第一篇文章,刚开始,我们先不对源码做深入的分析,我们先要对源码的结构和ReactNative的框架有个大致的印象, 1. ReactNative系统框架是怎样的?
2. ReactNative系统框架的主线在哪里,有哪些支线,如何去分析这些线路?
好,我们先来看第一个问题。 ReactNative系统框架概述ReactNative源码结构图 - jni:ReactNative的好多机制都是由C、C++实现的,这部分便是用来载入SO库。 - perftest:测试配置 - proguard:混淆 - quicklog:log输出 - react:ReactNative源码的主要内容,也是我们分析的主要内容。 - systrace:system trace - yoga:瑜伽?哈哈,并不是,是facebook开源的前端布局引擎
react依赖另外几个包,它们的调用关系如下图所示: ReactNative系统框架图如下所示:
ReactNative系统框架主线与支线从上面对ReactNative系统框架的分析,我们很容易看出源码的主线就在于ReactNative的启动流程、UI的绘制与渲染以及双边通信(Java调用JS,JS调用Java)。 源码主线: 1 ReactNative应用启动流程 2 ReactNative应用UI的绘制与渲染 3 ReactNative应用通信机制 3 ReactNative应用线程模型 源码支线: 1 ReactNative运行时的异常以及异常的捕获与处理。 2 SOLoader加载动态链接库 3 ReactNative触摸事件处理机制 在正式开始分析源码之前,我们先简单介绍一下各个类的作用,让大家先有个大概的印象,方便以后的讲解。 ReactContext(Java层) 继承于ContextWrapper,是RN应用的上下文,通过getContext()去获得,通过它可以访问RN核心类的实现。
ReactInstanceManagerImpl/ReactInstanceManagerImpl(Java层) RN应用总的管理类,创建ReactContext、CatalystInstance等类,解析ReactPackage生成映射表,并且配合ReactRootView管理View的创建与生命周期等功能。 CatalystInstance/CatalystInstanceImpl(Java层/C++层) RN应用Java层、C++层、JS层通信总管理类,总管Java层、JS层核心Module映射表与回调,三端通信的入口与桥梁。
NativeToJsBridge(C++层) Java调用JS的桥梁,用来调用JS Module,回调Java。
JsToNativeBridge(C++层) JS调用Java的桥梁,用来调用Java Module。
JSCExecutor(C++层) 管理WebKit的JavaScriptCore,JS与C++的转换桥接都在这里进行中转处理。
MessageQueue(JS层) JS调用队列,调用Java Module或者JS Module的方法,处理回调。
JavaScriptModule(Java层) JS Module,负责JS到Java的映射调用格式声明,由CatalystInstance统一管理。
ReactContextBaseJavaModule/BaseJavaModule/NativeModule(Java层) Java Module,负责Java到Js的映射调用格式声明,由CatalystInstance统一管理。
JavascriptModuleRegistry(Java层) JS Module映射表
NativeModuleRegistry(Java层) Java Module映射表
附录为了方便大家理解,准备了导读PPT。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |