前言
公司需要,所以这些天来学习一下React。
初识
- react的官网是https://reactjs.org/
- 开始项目
npx create-react-app my-app
cd my-app
npm start
-
在安装项目的时候会下载一些包,下载完成后就建完项目啦。
-
目录结构
大致是这样的,其中一些没用的东西可以删除掉。
几个比较重要的概念
虚拟DOM
- 什么是DOM?
浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API;
- 什么是虚拟DOM?
是框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套;
本质不同:虚拟DOM是用js对象,来模拟DOM元素和嵌套关系
目的:实现高效更新
比较:
原始版
改进:
升级版利用了虚拟DOM
Diff算法
新旧两棵DOM树,逐层对比的过程,就是 Tree Diff; 当整颗DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
如果第一层对比失败,就不会往下对比了,重新生成为了是算法简单,方便。
注意:一般都会给每个节点起一个id,标识身份,但是一般不用索引,因为索引位置会变
如果他涉世未深,就带他看尽世间繁华。如果他历尽沧桑,请带他坐旋转木马。