React学习（一）

前言

公司需要，所以这些天来学习一下React。

初识

1. react的官网是https://reactjs.org/
2. 开始项目

npx create-react-app my-app
cd my-app
npm start

如果在下载的时候报版本错误，可以使用以下命令

npx create-react-app my-app  --use-npm

3. 在安装项目的时候会下载一些包，下载完成后就建完项目啦。

4. 目录结构
   
   大致是这样的，其中一些没用的东西可以删除掉。

几个比较重要的概念

虚拟DOM

1. 什么是DOM？

浏览器中的概念，用JS对象来表示 页面上的元素，并提供了操作 DOM 对象的API；

2. 什么是虚拟DOM？

是框架中的概念，是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套；

本质不同：虚拟DOM是用js对象，来模拟DOM元素和嵌套关系
目的：实现高效更新

比较：
原始版

改进：

---

升级版利用了虚拟DOM

Diff算法

新旧两棵DOM树，逐层对比的过程，就是 Tree Diff； 当整颗DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；

如果第一层对比失败，就不会往下对比了，重新生成为了是算法简单，方便。
注意：一般都会给每个节点起一个id，标识身份，但是一般不用索引，因为索引位置会变

如果他涉世未深，就带他看尽世间繁华。如果他历尽沧桑，请带他坐旋转木马。