React note1（简介）

Myth丶恋晨 2022-11-27 06:29 110阅读 0赞

### （一）什么是 React ? ###

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

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

### （二）React 开发背景 ###

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

Facebook 需要解决的问题：构建数据不断变化的大型应用。（数据变化会造成以下两点的问题，React的解决方案是什么呢？）  
![在这里插入图片描述][20200813153818771.png_pic_center]

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

> 当Node节点的更新，虚拟DOM会比较两棵DOM树的区别，保证最小化的DOM操作，使得执行效率得到保证。  
> 计算两棵树的常规算法是O(n^3)级别，所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。  
>   
> 参考：[深入理解React虚拟DOM][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 发展史 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]

### （八）React 浏览器兼容性 ###

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

[20200813153818771.png_pic_center]: /images/20221124/d1b82338ab7a4c9eaa4fc37300b730e4.png
[React_DOM]: https://www.cnblogs.com/yumingxing/p/9438457.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/abac53e375a34ff3856e7134fa6aaf96.png