1.ReactNative源码分析 - 概述
2.ReactNative源码分析 - JavaScriptCore C语言篇
3.ReactNative源码分析 - 启动流程
4.ReactNative源码分析 - 通信机制
5.ReactNative源码分析 - 渲染原理

• 一、前言
  • 1.ReactNative简介
  • 2.ReactNative技术栈
  • 3.源码阅读建议
• 二、ReactNative代码目录分析
• 三、ReactNative项目架构分析
  • 1.架构层次说明
  • 2.ReactNative框架层分析

一、前言

• ReactNative本身代码库比较庞大，笔者这一系列文章主要从iOS端分析Native与JS两端如何打通，如何实现渲染、通信。ReactNative使用到的相关第三方库、技术栈会有所涉及，但不会做过多讨论。
• 笔者接触ReactNative时间算是比较晚的，做跨平台开发不足一年，若文中出现错误，还请各路英雄指出。做ReactNative后感受是：跨平台开发在特定的业务场景中有它独到的优势，能够大幅度提高生产力，作为开发者还是得拥抱变化，据笔者所知在很多大厂已经在生成环境中大规模应用ReactNative。
• 本系列文章基于react-native 0.59.4版本进行分析，按照技术点大致划分，依次推进，建议按顺序阅读。JavaScriptCore是ReactNative的基石，因此会先通过“JavaScriptCore C语言篇”分析两者的关系；启动流程从原生app开始切入ReactNative源码的地方分析；启动流程完毕才具备Native&JS通信的能力，因此通信机制次之；渲染等功能是基于Native&JS通信机制来进行的，因此放到最后。

1.ReactNative简介

• ReactNative是FaceBook发布的一个跨平台开发框架，通过React来构建移动APP，旨在保留React开发效率与开发体验的同时，达到Native应用的性能与用户体验。
• ReactNative有如下特点
  • 声明式：React使得它可以轻松创建声明式UI，代码更具可读性、更易于调试；
  • 组件化：基于组件化开发理念，创建具备状态管理的组件，通过组件组合，可构建复杂UI；
  • 便捷开发：本地调试工具使得JS代码可实时重载，无需重新编译APP即可看到实时效果；
  • 跨平台：具备跨平台特性，一套代码可用于iOS、Android平台；
  • 热更新：支持动态更新js bundle包；

2.ReactNative技术栈

• ReactNative开发涉及到的技术栈大致如下
  • 日常开发用到的组件/接口 ReactNative；
  • 声明式组件化开发框架 React；
  • 语法 JavaScript、ES6；
  • 布局知识 FlexBox；
  • 包管理工具 npm/yarn；
  • 大型项目可能还需要状态管理库 Redux；

3.源码阅读建议

• ReactNative源码结构大致分三层：原生层（Objective-C/JAVA）、公共层（C++）、JS层，从iOS端阅读源码需具备知识体系如下：
  • 熟悉Objective-C。由于源码涉及多线程编程，需要掌握GCD、RunLoop线程保活等知识
  • 熟悉JavaScript。
  • 基本的C++面向对象知识。iOS原生层几乎都是OC/C++混编；底层公共层是iOS/Android共用，纯C++编写。ReactNative使用了很多C++新特性，因此最好了解C++11
• ReactNative启动流程从RCTRootView的initWithBridge: moduleName: initialProperties:函数切入。阅读源码可由此开始逐步调试，梳理脉络。建议关注主流程，适当跳过技术上的细枝末节，避免深陷其中。

二、ReactNative代码目录分析

ReactNative项目目录.jpg

• ReactNative项目主体是一个JavaScript（or TypeScript）工程：
  • js目录为业务代码；
  • ios/android目录为原生模块；若采用混合开发，可通过git子模块形式把ios/android原生工程添加入主体项目
  • node_nodules目录是项目集成的第三方库

ReactNative框架目录.jpg

• ReactNative项目第三方库位于node_nodules，其中node_nodules/react-native目录下便是我们分析的重点，包含了JS模块、iOS和Android独立/公共模块、react-native依赖的第三方库信息等。
  • Libraries：源码核心部分，包含原生端导出的封装为js版本组件、通信Bridge、渲染模块……
  • React：iOS原生层（ReactAndroid为Android原生层）
  • ReactCommon：原生底层iOS/Android公共层，纯C++编写。
    • jsi：JavaScriptCore为默认JS引擎。jsi是对JavaScriptCore的封装，提供更加通用接口，达到隔离效果，使用者已经意识不到JavaScriptCore的存在了。
    • jsiexecutor:基于jsi的js执行器
    • yoga：facebook的跨平台布局库，用于渲染阶段计算视图布局信息
    • cxxreact：Native&JS通信的核心模块
  • third-party：ReactNative源码原生部分依赖的第三方库，主要是folly。
    • folly是facebook出品的c++11功能增强和扩展库。c++为静态语言，folly增加了C++的动态特性，得益于此，底层基于C++的ReactNative才可以与动态语言JavaScript无缝衔接。
    • 其他库主要是作为folly的依赖

三、ReactNative项目架构分析

ReactNative项目架构图.jpg

1.架构层次说明

• 一个使用ReactNative的项目，按照框架依赖关系/调用关系划分，大致架构如上图所示，从底层到顶分析
  • 系统层：即iOS平台提供的官方库
  • ReactNative框架层：即facebook的ReactNative框架集合，这一层包罗万象，使用语言众多，是这一系文章的重点分析对象。
  • 项目业务层：包括Native业务、JS业务，即是我们日常开发写码的一层。ReactNative支持混合开发，可封装原生控件、原生模块（eg：推送、分享、定位…）并导出到JS端使用。通常情况下，即使是纯ReactNative开发，也需要编写一部分原生业务，例如ReactNative没有成熟可定制第三方分享，这就需要原生端集成封装再导出到JS端使用。

2.ReactNative框架层分析

• JavaScriptCore是iOS系统框架WebKit的内建JS脚本引擎，它支持JS&Native交互。在app使用WebView渲染内嵌网页，也是基于它，只不过UI的绘制、渲染最终都还是浏览器来完成，用户体验欠佳。
• ReactNative则是在JavaScriptCore的基础上构建一座桥梁（Bridge），使得Native与JS高效且便捷地互相调用，这便是ReactNative框架的核心。通过Bridge，原生层可以封装丰富的功能模块导入Bridge供JS端调用，JS端也可以封装功能模块导入Bridge供原生端调用。

最终我们以React的模式来开发（JSX、props、State……），业务逻辑在JS端书写，JS端计算完毕调用原生端导出的功能模块接口把计算结果输送到原生端，驱动原生端完成UI绘制、网络、定位等一系列功能，并在需要时调用JS端导出的功能模块、callback等给予JS端反馈。即：通过React模式做业务开发却达到了原生开发的用户体验。

这个创造性的想法打开了一扇大门，使得JavaScript社区中各种框架/工具（eg: React、Redux……）可以在客户端开发中发挥他们强大的威力。

• React的开发模式本身是非常高效（特别是UI搭建），再加上跨平台特性，使得ReactNative在很多业务场景下是很先进的生产力。

Reference

• ReactNative