React Native深入研究（第一篇）

一. 什么是RN？

---

1. Build native mobile apps using JavaScript and React

2. A React Native app is a real mobile app

一千个人用就有一千种解释，本人概而言之为：React-Native利用web应用和Native的优势，用JS来实现移动端的应用。利用React的原生UI组件代替DOM的渲染，实现了一种只用一种开发语言便能高效的开发出一款与平台无关的app。

详细请参考官方文档：https://facebook.github.io/react-native/

二. 相关技术名词解释。

---

想更好的学习接下来的内容，一些必要的技术名词是需要事先弄明白的。免得一头雾水。

三. RN的原理

---

对于菜鸟而言，对于这么深奥的原理，我一般会细化。

整体架构：

个人喜欢对比性分析问题，喜欢细化性分析问题，所以RN的原理我主要分了以下几个步骤来学习理解：

第一步：ReactNative的渲染机制。

在这里引用一个Virtual Dom的概念。顾名思义，这是对DOM的一个虚拟。是一个纯js写的一个伪DOM的结构，主要是运用一种diff的算法，高效完成局部数据刷新。网页实际上都是解析成dom的格式被加载渲染，但是每次渲染都是dom数据的重载，而virtual dom则是实现了部分重新加载这样就大大提高了高效性。

说到这，就会提到React框架，所谓的React框架其实就是一套简洁高效绘制DOM的框架，而这个框架的高效实现就是基于Virtual DOM。之所以快还有一个原因Virtual DOM是运行在内存里的。

综合以上，宏观上我们似乎对React有了那么一丁点的了解，不妨趁热打铁，来瞅瞅源码对DOM的实现：

对比性学习效率会更高，DOM的结构大家都不陌生，第一想到的便是Element，没错在ReactNative的源码里有这两个很相似的玩意：ReactElement和ReactClass

首先回顾下DOM的结构实例：

{type:'button',

props: {    className:'button button-blue',  

children: {     

type:'b',     

props: {     

  children:'OK!'}  

}

}}

而针对于React而言，我们称之为Component Element：

classButtonextendsReact.Component {

render() {

const{ children,color } =this.props;

return{

type:'button',

props: {

className:'button button-'+ color,

children: {

type:'b',

props: {

children: children

}

// Component Elements

{

type: Button,

props: {

color:'blue',

children:'OK!'

}

看完他和DOM的结构不同，再来看看我们怎么用：

看起来好简单，就是js随便搞搞，但是问题来了，怎么没和dom结构扯上任何关系的赶脚？看看人家如何运行的就明白了：

进入到ReactElement的源码当中其实就是一个js：

var ReactElement * function(type,key,ref,self,source,owner,props);

可以看的，父元素的props对象的一个属性children指向了刚新建的eleChildren元素；我们用对象的形式表示出来就是：

{

$$typeof: Symbol(react.element),//ReactElement的唯一标识

_owner: null,

key: undefined,//唯一标识

props: {//属性

children: {

$$typeof: Symbol(react.element),

_owner: null,

key: undefined,

props: {

children: "look~",

id: "reactChild"

},

ref: undefined,

type: "p"

},

id: "text",

onclick:"hello"//指向hello方法的指针

},

ref: undefined,//对DOM的引用

type: "div"//标签类型

}

这样的话ReactElement的结构就很清楚了，React正是通过这种对DOM的抽象，再根据不同的ReactElement生产不同的组件Component，然后递归渲染；其中React.render()便是处理事件绑定的过程。

以上都是说的ReactElement，下面我们聊聊ReactClass。

顾名思义，看见class就知道肯定和类脱不了关系。你很聪明，它确实就是React Component整出来的类或者是属性。说到这有些小伙伴可能不太懂Component这个东东了，玩过html吗？很好，你可以简单的理解它就是html的任何一个tag属性，比如div，li等等。几乎包含了html的所有标签。不过需要注意的是每一个component要包含一个render使用。这个也不难理解，这就是为了创建一个element。因为毕竟最终的dom都是以element组成的。吻合了dom的渲染。

通过上图可以看出这是一个递归调用的过程，最终是以一个element结束。

Component Elements实例

class Button extends React.Component{render() {  

     const { children, color } =this.props;return{type:'button',     

    props: {        className:'button button-'+ color,       

   children: {

      type:'b',         

props: {           

     children: children         

    }        }      }    };  }}

// Component Elements

{type:

   Button, 

   props: {    color:'blue',    children:'OK!'}

}

1. 调用 React.render 方法，将我们的 element 根虚拟节点渲染到 container 元素中。element 可以是一个字符串文本元素，也可以是如上介绍的 ReactElement 。

2. 根据 element 的类型不同，分别实例化 ReactDOMTextComponent , ReactDOMComponent ,

3. ReactCompositeComponent 类。这些类用来管理 ReactElement ,负责将不同的 ReactElement转化成DOM，并更新DOM。

4. ReactCompositeComponent 实例调用 mountComponent 方法后内部调用 render 方法，返回了 DOM Elements 。然后递归。

第二步：ReactNative通信机制

在说到底层的通信机制前，先来了解下宏观上js和nativemodule上是怎么玩的。官网上明确提出了三种方式，callback，promises和event以及onActivityResult。

callback：例子很简单，比如native层对布局发生了改变，callback就返回给js层，返回去的数据包括布局所需要的属性值。

promises：个人觉得和callback的用法神相似，只不过是pormises返回给js的是一个对象。

event和onActityResult就很熟悉了在这里就不多讲了，大家一看便知。个人建议学习api还是照官网来。

well，接下来我们透过现象看本质，实际上js和native的通信到底是干了什么见不得人的勾搭。

由于本人是做android的，所以直接拿android说事。首先盗个图：

通过上图不难看出，通信的核心部分就是Bridge和Webkit这两块东西了。根据通信方向是双向的，和cs的模式非常相似，一端发问一端回答，而这里的客户端切记是native层发出的。

一说到底层大家就慌了，有种不知如何下手的赶脚，别怕，先从入口来吧，总归会发现些许的蛛丝马迹。拿我的demo为例，先从MainActivity开始：

好简洁神马都没，那就直接进入ReactActivity里面看看。看到了一个关键：

private final ReactActivityDelegate mDelegate;

ReactActivity被封装的也很好并看不出入口的嫌疑，所以我锁定了这个代理，进去瞅瞅。

我们熟悉的onCreate方法终于出现了，loadApp让我们眼前一亮，继续跟踪：

终于等到你，startReactApplicaition这个方法说明了一切，别太高兴，我们刚刚找到个入口而已。看看参数吧，细枝末叶的就不说了，这个ReactInstanceManager貌似很重要，manager嘛肯定来头不小，进去一看果真如此：

一切的一切越来越明朗了，这个builder有那么多熟悉的玩意，瞬间想起了我建立的nativemodule啊，package啊以及传说中的js啊，好像都在这里同时出现了，赶紧来看看demo之间他们的联系。

TestMoudle：两个地被用到，第一处是在MyReactNativePackage里面：

@Override

publicListcreateNativeModules(ReactApplicationContext context) {

List modules =newArrayList<>();

modules.add(newTestModule(context));

returnmodules;

}

第二在index.android.js里面：

export default class FirstReactApp extends Component{

render() {

return(

toast for short

this.onClick()}>

);}onClick() {

NativeModules.TestModule.callNativeMethod("zsfsdgfhfgh");}}

MyReactNativePackage: 好家伙在MainApplicaiton里面呢。

一层层往后剥，不管你们懂没懂，看到这我大概就懂了。先小小总结一下，消化下再继续。

module像是一个javabean，reactpackage相当于一个容器囊括的各色各样的module，最终又全部塞进Applicaiton里面送到底层。同时也把入口的js给传过去了，我不睁眼说瞎话，看证据：

从createReactInstanceManager
这个方法看到：

builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));

进入到getBundleAssetName()这个方法内：

protected@Nullable

StringgetBundleAssetName() {return"index.android.bundle";

}

备注：明白人都知道index.android.js编译之后都是和index.android.bundle对应的。

后面就是JSBundleLoader处理js的操作。它的主要作用是去加载JSBundle。

回到startApplication方法里找到真正执行的方法：

越陷越深,突然发现了执行js的这个玩意:

有种恍然大悟的感觉，configmap，原来人家是有协议的。换句话说是要进行一一对应，网上说的真对，js和native之间是要相互注册进行翻译识别的。在Java层与Js层的bridge分别存有相同一份模块配置表，Java与Js互相通信时，通过bridge里的配置表将所调用模块方法转为{moduleID,methodID,args}的形式传递给处理层，处理层通过bridge的模块配置表找到对应的方法执行，如果有callback，则回传给调用层。

讲到这大概的工作原理是通了，下面就真枪实弹来一发吧。

四. RN的环境搭建。

---

 环境准备

step1：下载最新的node.js

官网下载地址：https://nodejs.org/en/

step2： 配置node.js的环境变量，例如：

验证node.js是否安装成功：

step3:AS安装配置就不说了，但是有一点sdk必须是23.0.1的，react默认支持这个版本。

step4：安装React-Native. 用npm安装。npm install -g react-native-cli（前提是先下载reactnative）

step5：安装成功后创建项目：react-native init XXX（your project's name）

备注：有关RN开发环境搭建的东西就不详细介绍，以上步骤足以开发一个rn项目，如有需要可以下载模拟器。

五. RN的demo

---

1. 如何在AS里面导入一个不冗余的RN项目

通过react-native init xxx后的文件，直接导入android这个文件夹即可。

2. 可能会遇到的问题

问题一：出现不能load index.android.js的问题

原因是：导入到as要想正常的加载运行react项目必须有个build的工具进行对js的桥接，这个就是index.android.bundle。

解决方案：

要在main的目录文件先创建一个assets文件夹然后在项目根目录下执行：

问题二，导入到as的android项目没有把index.android.js导进来，怎么办？

原因是：index.android.js是在整个react目录下并不属于具体的android单独的项目，因此没法包含进来。

解决方案一，把一下标红的模块全部复制到android目录下，然后修改所有js模块下的目录引用，将../../改成../(方法不可取，工作量很大，一处修改不好都会造成项目运行失败)

解决方案二，as只负责下react的纯代码逻辑，js的东西还是在外面单独写吧。（虽然看起来和项目达不到是是一致性，但是是可取的，接受代码分离开发的模式，毕竟还是人家rn还是前端的，除非你不用as开发）

问题三，修改了index.android.js代码，可是并没有起作用。

原因是：上面就提到过，index.android.js虽然是关键，但是index.android.bundle却是纽带，他需要把js加工一层。不经过加工的js怎么改都是没用的，as不支持自动更新。

解决方案：在项目所在的根目录下重新生成index.android.bundle文件：

F:\myTestProject\FirstReactApp>react-native bundle --platform android --dev fals

e --entry-file index.android.js --bundle-output android/app/src/main/assets/inde

x.android.bundle --assets-dest android/app/src/main/res/

备注：目前我只发现可以这样，如有更好的解决方案，欢迎留言。

3. demo详解

通过对index.android.js的修改玩转各种基本属性。

A. 有关神马的html标签如何使用，就不啰嗦了，很简单。我总结的规则：想使用什么标签就得先import什么标签。render是起点，return是关键。事实上return回来的东西是要jsx解析的。所以return里面可以写任意类似的html标签，若想定义属性，可以在render里，return外定义。

B. props属性

再没开始props这个属性前，我们先看下代码结构default class就类似于我们入口class，可以想象成java当中的main方法，其他的class，可以任意定义，然后嵌套使用和引用。而引用的方式却是组件式属性引用。‘aa’相当于一个变量名称，必须和引用一一对应，所以可以任意定义。效果图：

C. state属性。

上面讲到props属性感觉挺好用的，有种数据绑定的意思。但是真正起到数据绑定且在项目中举足轻重的还是state这个属性。比如server端的数据有更新，前端需要更新咋整？这个时候就需要state了。以下是个简单的例子：

这里的例子和官网的例子差不多，因为没有server端的数据，所以就整了计时器假装数据有更新。这个demo需要注意的点。第一，state必须在construct里面初始化，从代码中可以看到其实state也是一个props，你可以当成是props的升级。第二，数据更新的关键是setState方法。

D. Network

比较好的一点是，支持fetch，支持第三方网络请求库，也支持websocket。

Fetch

testFetchMethod() {

fetch('source address',

{method:'POST',

headers:{'Accept':'application/json','Content-Type':'application/json'},

body:JSON.stringify({

firstParam:'aaaa',

secondParams:'safdsfds'})});

}

第三方库（比如：XMLHttpRequest）

var request =new XMLHttpRequest();

request.onreadystatechange= (e) => {

if(request.readyState!==4) {

return;

}

if(request.status==400) {

console.log('success',request.responseText);

}else{

console.log("error");

}

request.open("GET","address");

request.send();

websocket

varws =newWebSocket('ws://host.com/path');

ws.onopen= () => {

// connection opened

ws.send('something');// send a message

};

ws.onmessage= (e) => {

// a message was received

console.log(e.data);

};

ws.onerror= (e) => {

// an error occurred

console.log(e.message);

};

ws.onclose= (e) => {

// connection closed

console.log(e.code,e.reason);

};

备注：以上只是个人觉得比较实用的属性。其他有需要可以研究api。

F:JS和Native通信的demo

其实在讲通信机制的时候已经说到了，大概的流程：

源码就不再贴了，说一下可能遇到的问题。

解决方案：在你的nativemodule里面一定要加入以下代码：

@Override

public booleancanOverrideExistingModule() {

//这里需要返回true

return true;

}

六. RN的优缺点

---

有关RN的优缺点，本人暂时先保留不说。别问我为什么，还没研究到一定的程度时，我没资格说！！

七. 总结

从一窍不通到对这个RN的学习，研究收货甚多。也感觉到了RN的精妙之处，这是第一篇，后续我会继续深究完善后续升级文档。喜欢的希望继续关注！

---