react的学习笔记

React中几个核心的概念
### 虚拟DOM（Virtual Document Object Model）
+ **DOM的本质是什么**：浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操做 DOM 对象的API；
+ **什么是React中的虚拟DOM**：是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套；
+ **为何要实现虚拟DOM（虚拟DOM的目的）：**为了实现页面中， DOM 元素的高效更新
+ **DOM和虚拟DOM的区别**：
+ **DOM：**浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操做元素的API；

+ **虚拟DOM：**是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；

+ 本质： 用JS对象，来模拟DOM元素和嵌套关系；
+ 目的：就是为了实现页面元素的高效更新；

 

Diff算法
- **tree diff:**新旧两棵DOM树，逐层对比的过程，就是 Tree Diff； 当整颗DOM逐层对比完毕，则全部须要被按需更新的元素，必然可以找到；

- **component diff：**在进行Tree Diff的时候，每一层中，组件级别的对比，叫作 Component Diff；

- 若是对比先后，组件的类型相同，则**暂时**认为此组件不须要被更新；
- 若是对比先后，组件类型不一样，则须要移除旧组件，建立新组件，并追加到页面上；

- **element diff:**在进行组件对比的时候，若是两个组件类型相同，则须要进行 元素级别的对比，这叫作 Element Diff；

 

 

使用

1导入包裹

2建立虚拟dom

3调用render函数渲染

 

JSX语法

> 什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来讲，要比HTML严谨不少）

 **jsx 语法的本质：**并非直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；