react中的几个核心的概念

一.虚拟DOM（virtual Document object Model）

1.DOM的本质是什么？

• 浏览器中的概念，用js对象表示页面上的元素，并提供了操作 DOM对象的API（浏览器提供的API)

2.什么是react中的虚拟DOM？

• 是框架中的概念，虚拟dom是以js对象的形式存在的是程序员用 js对象来模拟页面上的DOM和DOM嵌套关系

3.为什么要实现虚拟DOM（虚拟DOM的目的）

• 为了实现页面中，DOM元素的高效更新

4.DOM和虚拟DOM的区别
DOM:浏览器中的概念，用js对象表示页面上的元素,并提供了操
作DOM对象的API
虚拟DOM:是框架中的概念，虚拟dom是以js对象的形式存在的是
程序员用js对象来手动模拟页面上的DOM元素和DOM嵌套关系
5.DOM树的概念
一个页面呈现的过程：
1.浏览器请求服务器获取页面的html代码
2.浏览器要现在内存中，解析DOM结构，渲染出一棵dom树
3.浏览器把dom树，呈现到页面上
6.如何实现按需更新

• 获取内存中的新旧两棵dom树进行对比，得到需要被更新的dom 元素

7.如何获取到新旧dom树从而实现dom树的对比呢？

• 浏览器中并没有直接提供获取dom树的API，因此我们无法获取浏 览器中的DOM树

8.程序员可以手动模拟 新旧 两棵DOM树

• 就是react中虚拟dom树 html是创建DOM元素的，css是美化dom元素的,JS对象来模拟dom 元素

9.Diff算法
tree diff：新旧两棵DOM树，逐层对比的过程，就是Tree Diff；当整棵
DOM逐层对比完毕，则所有需要被按需要更新的元素，必然能够找到
component diff：在进行Tree Diff的时候，每一层中，组件级别的对比，叫做component DIff；

• 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新
• 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上

element diff：在进行组件对比的时候，如两个组件类型相同，则需要进行元素级别的对比，这叫做Element Diff