React源码分析-渲染篇

ReactJS和React-Native的区别

React是由Facebook推出的一个JavaScript框架，主要用于前端开发。
React采用组件化的方式简化web开发

1.DOM:每个HTML页面可以看作为一个DOM
2.原生的web开发的方式。HTML一个文件，javascript一个文件，文件分开就会导致修改起来比较麻烦。
3.可以把一组相关的HTML标签和JavaScript单独封装到一个组件中，便于复用，方便开发

React可以高效的绘制界面

1.原生的web，刷新界面(DOM),需要把整个界面刷新
2.React只会刷新部分界面，不会整个界面刷新。
3.因为React独创了Virtual DOM机制。Virtual DOM是存在于内存中的JavaScript对象，它与DOM是一一对应的关系，当页面发生变化时，React会利用DOM Diff算法，把有变化的DOM进行刷新

ReactJS的目的是使前端的view层更具组件化，能更好的复用，它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时让你从操作dom中解脱出来，只需要操作数据就可以操作dom。

React-Native:
React-Native是基于React开发APP
优点：

1.跨平台开发
2.跳过App Store审核，远程更新代码，提高迭代频率和效率，既有Native的体验，由保留React的开发效率

React Native的目的是希望我们能够使用前端的技术栈就可以创建在不同平台下运行的一个框架。可以创建在移动端运行的APP,但性能比原生APP差点

React-Native原理

刚开始看到React-Native挺困惑的，Native是指用原生api开发，但是React-Native是用原生的API开发，但是React Native又是用react开发。所以决定弄懂关于React Native底层原理实现的相关知识。
1.React Native底层也会把React转换为原生API
2.React Native兼容两个平台，IOS和Android。React Native需要IOS，安卓都写，说明React Native底层解析原生API是分开的，IOS一套，安卓一套。

React Native如何把React 转化为原生API

React Native会在一开始生成OC模块表，然后把这个模块表传入JS,JS参照表就能够间接调用OC代码。

相当于购买了一个机器人(OC)，对应一份说明书（模块表），用户（JS）参照说明书去执行机器人操作。

React Native是如何做到JS和OC交互

iOS原生API有一个JavaScriptCore框架，通过它就能实现JS和OC交互。
1.首先写好JSX代码(React框架就是使用JSX语法)
2.把JSX代码解析成javascript代码
3.OC读取JS文件
4.把javascript代码读取出来，利用JavaScript执行
5.javaScript代码返回一个数组，数组中会描述OC对象，OC对象的属性，OC对象所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。