浅浅浅浅浅淡React

写在前面

React起源于脸书网(Facebook)，是一个用于构建用户界面的JS库，它拥有较高的性能，代码逻辑非常简单，越来越多的人开始关注并使用它。它与vue是当前前端使用最多的JS框架。

React开发背景

Facebook 需要解决的问题：构建数据不断变化的大型应用。（数据变化会造成以下两点的问题，React的解决方案是什么呢）

虚拟DOM

虚拟DOM相当于在JS和真实DOM中间加了一个缓存。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都首先重新构建整个DOM树（减少页面更新次数），然后React将当前整个DOM树和上一次的DOM树进行对比(DOM Diff算法-最小化页面重绘)，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

总结：减少更新次数，减少更新区域。

那为什么虚拟DOM就会提高性能呢？

虚拟DOM相当于在JS和真实DOM中间加了一个缓存，利用DOM diff算法避免了没有必要的DOM操作，从而提高性能。
用JavaScript对象结构表示DOM树的结构，然后用这个树构建一个真正的DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

Diff算法

Diff作用：计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

传统Diff算法：通过循环递归对节点进行一次对比，算法复杂度达到了O(n^3)，n为树的节点数。(如果要展示1000个节点，需要执行上亿次比较)。

React中的Diff算法：

1）调和：将Virtual(虚拟)DOM树转换成Actual(真实)DOM树的最少操作的过程称为调和。

2）React Diff算法：调和的具体实现。

React Diff原理：React用三大策略将O(n^3)复杂度转化为O(n)复杂度。React采用虚拟DOM技术实现对真实DOM的映射，即React Diff算法的差异查找。实质是对两个JavaScript对象的差异查找。

1）tree diff：Web UI 中DOM节点跨层级的移动操作特别少，可以忽略不计。

2）component diff：拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结。

3）element diff：对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

React特点：

声明式设计 −React采用声明范式，可以轻松描述应用。（开发者只需要声明显示内容，react就会自动完成）。
　　高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
　　灵活 −React可以与已知的库或框架很好地配合。
　　组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（把页面的功能拆分成小模块--每个小模块就是组件）。
　　单向数据流--　React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。

React组件特性：

React的核心就是组件：组件的设计目的是提高代码复用率，降低测试难度和代码的复杂程度。
　　提高代码复用率：组件将数据和逻辑进行封装。
　　降低测试难度：组件高内聚低耦合（各个元素高集成度低关联性），很容易对单个组件进行测试。
　　代码的复杂程度：语法直观，可以极大提高可读性。