React快速入门

1. 概念介绍

React起源于Facebook的内部项目，因为该公司对市场上所有JavaScript MVC框架，都不满意，就决定自己写一个，用来架设他们自己的Instagram的网站。

做出来之后，返现这套东西很好用，在2013年5月开源了，目前已经成为了全世界范围内前端的三大主流框架之一，与之同样受欢迎的有angular.js、vue.js，在这三个框架中React属于最流行的框架。

2. React是什么

React适用于构建用户界面的JavaScript库，简单轻盈, 主要用于前端的渲染。单单一个React是不具备开发大型项目的，但是React的生态非常的好，围绕React的技术栈有很多，主要包括：React, redux, react-redux,react-route,…..如果想了解更多可以查看github。

React英文官方网站 React中文官方网站

3. React具备什么特点

1. 使用JSX语法创建组件，实现组件化开发，为函数式的UI编程方式打开了大门
2. 性能高：通过diff算法和虚拟DOM实现视图的高效渲染和更新
3. 使用起来的其他特点：
4. 声明式
5. 组件化
6. 一次学习随处编写

4. React核心

1. 虚拟DOM

概念

React将DOM抽离为虚拟DOM，虚拟DOM其实就是一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟DOM

当DOM发生改变时需要遍历DOM对象的属性，而原生DOM可遍历属性多达200多个，在这200多个属性中可能需要重新渲染并不是很多，导致更新页面的代价太大。

所以使用虚拟DOM就可以实现局部更新的效果，从而提高渲染效率。

虚拟DOM的处理方式

用JS对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，插入到文档当中。

当状态变更时，重新构造一棵新的JS对象树，然后使用新的树和旧的树作对比，记录两颗树的差异。

将记录的差异之处，重新渲染到文档中，从而实现文档的更新。

虚拟DOM：

• 本质：使用js来模拟DOM元素和嵌套关系
• 目的：为了实现页面元素的高效更新（按需更新）

2. Diff算法

作用

用于：最小化页面重绘

过程

当我们使用React在render()函数创建一棵React元素树，在下一个state或者props更新的时候，render()函数就会创建一棵新的React元素树。

React() 将对比这两棵树的不同之处，计算出如何高效的更新UI(只更新变化的地方，此处采用的就是diff算法)

实现按需更新，使用diff算法：

• tree diff：新旧两颗DOM树，进行逐层对比的过程，就是Tree Diff， 当整个DOM逐层对比完毕，则所有按需被按新的元素，必然可以找到
• component diff： 在进行Tree Diff的时候，每一层中，组件级别的对比，叫 Component Diff；
  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新
  • 如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件，并追加到页面上
• element diff： 在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做element diff

虚拟DOM和DIff算法是React的两大特性，相辅相成，缺一不可。一起完成了高效渲染，局部刷新的功能