史上最全的React学习总结，保你一看就会。(一)

一.首先介绍一下React：

1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)。
2. 由Facebook开源。

二.React的特点： 

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效（优秀的Diffing算法）

三.React高效的原因：

1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。

四.React的基本使用：

        1.React中相关js库：

                （1）react.js：React核心库。

                （2）react-dom.js：提供操作DOM的react扩展库。

                （3）babel.min.js：解析JSX语法代码转为JS代码的库。

        2.创建虚拟DOM的两种方式:

                (1)纯JS方式(一般不用)

                (2)JSX方式

        3.虚拟DOM与真实DOM： 

                （1）React提供了一些API来创建一种“特别”的一般js对象。

                        比如：const VDOM=React.createElement('xx',{id:'xx'},'xx')

                               上面创建的就是一个简单的虚拟DOM对象

                （2）虚拟DOM对象最终都会被React转换为真实的DOM。

                （3）我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变                           化而更新界。

五.简单介绍一下JSX:

1. 全称:  JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM
   1. 写法：var ele = <h1>Hello JSX!</h1>
   2. 注意1：它不是字符串, 也不是HTML/XML标签
   3. 注意2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 基本语法规则
   1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
   2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
7. babel.js的作用
   1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
   2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

六.模块与组件，模块化与组件化的理解：

        1.模块：

                （1）理解：向外提供特定功能的js程序, 一般就是一个js文件

                （2）为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

                （3）作用：复用js, 简化js的编写, 提高js运行效率

        2.组件：

                （1）理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)

                （2）为什么要用组件： 一个界面的功能更复杂

                （3）作用：复用编码, 简化项目编码, 提高运行效率

        3.模块化：

                当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

        4.组件化：

                当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

看到这里呢，今天的就先结束了，明天继续更新后续哟！谢谢大家观看！