前言

ReactNative基于React框架设计，因此，了解React有助于我们更好的了解ReactNative。

目录

1.1前端技术扫盲

1.2React简介

1.1前端技术扫盲

为了未接触过前端技术的朋友们扫盲，简单说一下 HTML,CSS,javascript,AngularJS，Directive，JSX的概念。然后在说React方便大家理解。有基础的同学可以略过

HTML概念:

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。

css概念：

CSS 指层叠样式表 (Cascading Style Sheets)

主要作用是样式定义如何显示 HTML 元素

以下部分看不懂可以忽略

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

下面举个CSS的例子

以下例子中的 CSS 代码均位于 HTML 的 head 部分，这样做的目的是为了利于演示例子本身。在实际的开发中，使用 CSS 最好的方式是引用外部样式表。

JavaScript概念：

JavaScript 是脚本语言，JavaScript 是世界上最流行的编程语言之一，已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习

ECMAScript概念：

说白了就是语法跟对象ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

说白了就是语法跟对象。

DOM概念：

是HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。 

BOM概念：

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象

比如通过BOM我们可以做到

1. 弹出新浏览器窗口的能力；

2. 移动、关闭和更改浏览器窗口大小的能力；

下面举JavaScript几个例子

1.JavaScript 能够直接写入 HTML 输出流中：

2.JavaScript 能够对事件作出反应。比如对按钮的点击

3.JavaScript 能改变 HTML 元素的内容

4.JavaScript 能改变 HTML 元素的样式。

5.JavaScript：改变 HTML 图像

6.JavaScript：验证输入

JSX概念：

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

它是类型安全的，在编译过程中就能发现错误。

使用 JSX 编写模板更加简单快速。

JSX是React的核心组成部分，React使用JSX来替代常规的JavaScript。它使用XML标记的方式去直接声明界面，目的是通过各种不通的编辑器将这些标记编译成标准的JS语言。使用JSX语法后，可以让组件的结构和组件之间的关系看上去更加清晰并且执行效率更高。

说到这里相比大家对于HTML,CSS,JavaScript,JSX有一定的了解了。

想深入了解的可以到http://www.w3school.com.cn学习

Angular.js概念:

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 标签添加到HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中

其实就是一个三方库

AngularJs GitHub: https://github.com/angular/angular.js/

这里就不做深入描述。

Directive概念：

Directive（指令）是AngularJ非常强大而有有用的功能之一。在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：

1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。

2. 抽象一个自定义组件，在其他地方进行重用。

这里就不做深入描述

1.2React简介

React是由Facebook推出的前端开发框架，其本身作为MVC模式中的View层来构建UI,也可以以插件的形式应用到Web应用程序的非UI部分构件中，轻松实现与其他JS框架的整合。

github链接：https://github.com/facebook/react

React获得了技术人员的普遍支持正是由于这些原因React.js和Vue.js，Angular.js成为了当今最流行的三大前端框架。讲到React，必须提一下组建（Component）的概念，它是React最基础的部分，其功能相当于AngularJS里面的Directive。Component可以认为是由HTML,CSS,JavaScript和内部数据组合而成的模块。当然Component可以由很多的其他Component组成。不同的Component既可以用纯JavaScript定义，也可以用特有的JavaScript语法JSX创建而成。

虚拟DOM:

传统的Web开发是通过直接操作真实的DOM进行更新操作，而React采用了Virtual DOM（一个轻量级的虚拟DOM）。

虚拟DOM是React抽象出的一个对象。简单来说React在每次需要渲染时，会比较DOM与虚拟DOM的差异，然后再已最优的方法更新DOM。这个过程被称为reconciliation。

除了性能方面的考虑，React引入虚拟DOM更重要的意义在于提供了一种新的开发方式来开发服务端应用。

比如：

服务器渲染->虚拟DOM->NodeJSRender->

WebAPP->虚拟DOM->HTMLRender->

iOSAPP->虚拟DOM->iOSRender->手机展示

Render是一种图像渲染的抽象，可以简单理解成openGL 调用GPU的过程的抽象。

Components组件：

虚拟DOM不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想。

组件：

所谓组件，即自己封装的具有独立功能的UI部件，React推荐以组件的方式去构成视图，并建议将功能相对独立的模块抽象为组件。

采用组件化开发，往往具有以下特点：

可组合，可重用，可维护，可测试。

数据流：

React采用单向的数据流，即从父节点到子节点的传递

action->Dispathcher->Stroe->View

事件-调度-存储-渲染