写这篇记录有什么收获？
暂无
前提概要
React这么烂大街的框架，我竟然还没掌握它的语法和使用，深感恐惧。今天必须学一手！
第一节、react的起源
-
React由Facebook于==2013==年开源，至今已有七年的历史。react的设计思想极为优秀，从诞生至今，没有angular那种大刀阔斧的改变。 -
Angular1当初设计思想和现在的mvvm框架差异有点大，属于mvc框架，不支持组件化开发。因此Angular2和1相比可以说是两种不同的框架，思想区别很大，语法也变化很大。这一点上没有React做的优秀。
第二节、三个框架的对比
-
Angular.js：出来==较早==的前端框架，学习曲线比较抖，NG1学起来比较麻烦，NG2-NG5开始，进行了一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS进行编程。 -
Vue.js：==最火==（关注的人比较多）的一门框架，他是中国人开发的，因此文档相对较为友好。 -
React.js：==最流行==（使用的人最多）的一门框架，因为它的设计思想一开始就比较优秀。
第三节、React和Vue的对比
组件化方面
-
什么是模块化：是从==代码==的角度来分析的，把一些可复用的代码抽离成单个的模块，减少代码冗余并提高开发效率。
-
什么是组件化：是从==UI界面==的角度来分析的，把一些可复用的UI元素，抽离为单个的组件，可以在多个页面反复调用。
-
组件化的好处：随着项目的规模增大，封装的组件越多，很方便就能把现有的组件，拼接为一个完整的页面。
-
Vue是如何实现组件化的：通过
.vue文件局部注册或者Vue.component全局注册来创建对应的组件 -
React是如何实现组件化的：
React中有组件化的概念，但是并没有类似Vue的组件模板文件。React中，一切都是以js来实现的（包括使用js来创建组件）。
开发团队和社区方面
FaceBook的前端团队资金和实力不容小觑，且开源较早，社区相对成熟。但是Vue的开发团队同样由全球各地优秀的开发者组成，实力不相上下。
对移动APP的支持方面
-
Vue结合Weex这门技术，提供了迁移到移动端APP开发的体验（但是目前Weex使用人数不多，没有什么成功的案例）。 -
React结合React Native也提供了无缝迁移到移动端APP的体验，非常多的知名公司使用它
第四节 React中的核心概念
虚拟DOM
-
DOM的本质是什么：
DOM存在于浏览器中，浏览器使用js对象来表示页面上的元素及其特有的属性、在浏览器中的位置等，浏览器提供了操作DOM对象的一系列API -
什么是React中的虚拟DOM：
React及Vue等前端框架中的概念，是开发人员使用js对象来模拟页面中的DOM元素及其嵌套关系 -
为什么要实现虚拟DOM：为了实现页面中
DOM元素的高效更新
第五节 开始使用React
安装React
运行 npm i react react-dom 来安装react，这两个包的作用如下：
react：专门用来创建组件、虚拟DOM，同时组件的生命周期也包含在这个包中react-dom：专门用于DOM操作，最典型的场景就是ReactDOM.render()
最基础的react代码
// 导入包
import React from 'react'
import ReactDOM from 'react-dom'
// 创建虚拟DOM元素
const h1 = React.createElement('h1', {id: '1', title:'this is a h1'}, 'hi');
const div = React.createElement('div', null, '容器', h1);
// 使用render函数渲染
ReactDOM.render(div, document.getElementById('app'));
通过React的 createElement API固然可以创建任意HTML节点，但是对于实际的开发来说，这种方式实在过于繁琐。
想要构建一个嵌套关系复杂的HTML结构，最简单的方式还是使用HTML语法去实现。因此，React提供了一种JSX语法来实现在JS文件中混合写入HTML代码。如下：
const mydiv = <div id="foo">bar</div>
但是浏览器是不会识别JSX语法的，因此需要使用babel的babel-preset-react包将这种JSX语法转为createElement API。
