React note1（简介）

（一）什么是 React ?

React 起源于 Facebook， 是一个用于构建用户界面的 javascript 库。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

（二）React 开发背景

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

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

（三）虚拟Dom—减少更新次数、更新区域

当Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。
计算两棵树的常规算法是O(n^3)级别，所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。

参考：深入理解React虚拟DOM（讲的特别好）

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

为什么虚拟 dom 会提高性能？ (重要)

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

diff算法的作用

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

React的diff算法

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

React diff算法：是调和的具体实现。

Reqct高效的原因

使用虚拟DOM，不直接操纵页面DOM，减少页面重绘次数。同时使用DOM diff算法，最小化的减少对页面重绘。

（四）React 特点

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

其实优势这方面跟vue等框架很像比如：轻量级 简单易用 文档全面等。

（五）React 组件特性

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

（六）组件化编程思想

灵活的组件化设计思想，可以让你的页面功能更具复用性。同时低耦合度的组件可以让功能之间的影响降到最低。

（七）React 发展史

（八）React 浏览器兼容性

除去ie8以下版本，其余浏览器都可以很好的支持。