这是我参与「第四届青训营 」笔记创作活动的第13天
React 是当今最流行的三大前端框架之一，也是许多互联网大厂主流的前端构建框架，作为一名优秀的前端er，怎么能不学习 React呢，今天我们就一起来看看吧。
React
简介
React 起源于 Facebook 的内部项目，起初是用来架设 Instagram 网站的，后来被整理成一个框架，命名为 React 并开源。
作用
简单的来说，React 就是一个用于构建用户界面的 JavaScript 库。React 并不是传统的 MVC 框架，它只是用于构建页面 UI，一般认为只涉及 View 层的内容，但是 React 也并非按照 MVC 的开发模式来设计的，它有着自己的一套构建流程。
特点
- React采用声明范式，可以轻松描述应用。
- React通过对DOM的模拟，最大限度地减少与DOM的交互。
- React可以与已知的库或框架很好地配合。
- JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
总结下来，React 主要具备六大特点：
- 声明式
- 高效
- 灵活
- JSX 语法
- 组件
- 单向响应数据流
虚拟 DOM
虚拟 DOM 是 React 的核心，最早运用在 React 中，Vue 在 2.0 版本也跟着引入了虚拟 DOM 的概念。
什么是虚拟 DOM
虚拟 DOM 其实就是浏览器真实渲染出来的 DOM 元素的对应，它并会被浏览器渲染，它只是一串数据，与页面上的真实 DOM 元素一一对应。
本质
虚拟 DOM 的本质就是一个仿照 DOM 树构造的一个树形 JSON 对象，里面的数据描述了真实 DOM 树的各元素的信息。
作用
在过去，我们在 js 中修改了页面数据，还需要操作页面上的 DOM 元素，手动修改 DOM 元素。这不仅导致开发效率很低，也相当耗费浏览器的计算资源。
使用虚拟 DOM，我们就可以在修改数据后先将数据更新到虚拟 DOM，再由程序自动为我们检查是否和真实 DOM 树匹配，判断是否需要更新页面。同时使用虚拟 DOM 进行查询，也比真实 DOM 更加高效。
JSX
React 使用了 JSX 来替代 JavaScript，JSX 并没有改变原生 js 的语法，只是进行了功能的扩充，所以可以看做是 JavaScript 的语法扩展。
优点
- JSX 在编译为 JavaScript 代码时进行了优化，效率很高。
- JSX 实现了类型安全，在编译过程中就能及时发现错误。
- JSX 编写模板更加简便高效。
为什么要使用 JSX
正如之前提到的 JSX 的优点，使用 JSX 最主要的就是为了便于编写模板。
如果我们使用原生 JavaScript 来编写模板，会是这样：
const vdom=React.creactElement(
'div',
{id:'container'},
React.createElement(
'span',
{},
'A div'
)
)
ReactDOM.render(vdom,document.getElementById('app'))
</script>
可以看到，只能使用函数式的写法，不仅非常的反直觉，在嵌套元素时也异常繁琐，看起来也不够直观。
使用 JSX 后，我们就可以像 HTML 一样来编写模板：
ReactDOM.render(
<div id='container'>
<span>A div</span>
</div>,
document.getElementById('app'))
不仅非常直观，写起来也轻松得多。
另外，JSX 也可以在模板中插入 js 表达式，使用变量、函数等。
var myStyle = {
fontSize: 24,
color: '#F0F0F0'
}
var webTitle = 'JueJin'
ReactDOM.render(
<h1 style = {myStyle}>
{ 'Page' + webTitle }
</h1>,
document.getElementById('example')
);
