React框架介绍

缺乏、安全感 2021-09-17 00:24 435阅读 0赞

### Virtual DOM ###

虚拟DOM是React的基石。

*  之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。
 *  在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。这个过程被称为reconciliation。
 *  除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用：
 *  虚拟DOM本质：用js对象，来模拟DOM元素和嵌套关系；
 *  虚拟DOM目的：就是为了实现页面元素的高效更新。

### 虚拟DOM高效的原因——Diff算法 ###

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

### React组件 ###

*  组件化概念
 *  对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将**UI分成不同的组件，每个组件都独立封装。**
 *  在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

### Jsx语法 ###

*  在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个 XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是**利用JSX，组件的结 构和组件之间的关系看上去更加清晰**
 *  Jsx语法使用  
    HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。