转载

ReactNative iOS源码解析（未完成，等我写完的）

前两部分内容简单介绍一下ReactNative，后面的章节会把整个RN框架的iOS部分，进行代码层面的一一梳理

ReactNative 概要

ReactNative，动态，跨平台，热更新，这几个词现在越来越火了，一句 使用JavaScript写源生App 吸引力了无数人的眼球，并且诞生了这么久也逐渐趋于稳定， 携程 , 天猫 , QZone 也都在大产品线的业务上，部分模块采用这个方案上线，并且效果得到了验证（见2016 GMTC 资料PPT）

我们把这个单词拆解成2部分

React

熟悉前端的朋友们可能都知道 React.JS 这个前端框架，没错整个RN框架的JS代码部分，就是React.JS，所有这个框架的特点，完完全全都可以在RN里面使用（这里还融入了Flux，很好的把传统的MVC重组为dispatch，store和components， Flux架构）

所以说，写RN哪不懂了，去翻React.JS的文档或许都能给你解答

Native

顾名思义，纯源生的native体验，纯源生的UI组件，纯原生的触摸响应，纯源生的模块功能

那么这两个不相干的东西是如何关联在一起的呢？

React.JS是一个前端框架，在浏览器内H5开发上被广泛使用，他在渲染render()这个环节，在经过各种flexbox布局算法之后，要在确定的位置去绘制这个界面元素的时候，需要通过浏览器去实现。他在响应触摸touchEvent()这个环节，依然是需要浏览器去捕获用户的触摸行为，然后回调React.JS

上面提到的都是纯网页，纯H5，但如果我们把render()这个事情拦截下来，不走浏览器，而是走native会怎样呢？

当React.JS已经计算完每个页面元素的位置大小，本来要传给浏览器，让浏览器进行渲染，这时候我们不传给浏览器了，而是通过一个JS/OC的桥梁，去通过 [[UIView alloc]initWithFrame:frame] 的OC代码，把这个界面元素渲染了，那我们就相当于用React.JS绘制出了一个native的View

拿我们刚刚绘制出得native的View，当他发生native源生的 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 触摸事件的时候，通过一个OC/JS的桥梁，去调用React.JS里面写好的点击事件JS代码

这样React.JS还是那个React.JS，他的使用方法没发生变化，但是却获得了纯源生native的体验，native的组件渲染，native的触摸响应

于是，这个东西就叫做React-Native