开发者学堂课程【React 入门与实战:介绍 DOM 和虚拟 DOM 的概念】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8074
介绍 DOM 和虚拟 DOM 的概念
一、React中几个核心的概念
如果不了解虚拟 DOM 和 Diff 算法,去学习 React 将很不好理解,理解完这两个概率就可以说 React 学完50%了。概念占50%语法占50%。
虚拟 DOM (Virtual Document Object Model )
//文档对象模型
1、DOM 的本质是什么:只局限于浏览器端的概念,用 jS 对象来表示页面上的元素,并提供了操作 DOM 对象的 API( JS 对象除了可以来表示页面上的元素,还能操作元素)。
2、什么是 React 中的虚拟 DOM :虚拟 DOM 是框架中的概念,是程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套;
//特别标注程序员,虚拟 DOM 的 API 是由框架提供的,而框架是由程序员自己写的。
3、为什么要实现虚拟 DOM (虚拟 DOM 的目的) :为了实现页面中,DOM 元素的高效更新
4、DOM 和虚拟 DOM 的区别:>DOM:
>
虚拟 DOM:
表格的每一列都提供了一个上下箭头,这就是说点击时间就可以进行排序,从大到小或从小到大排序。
Diffit 算法tree diff:
combonent diff: