从零开始学React-coderwhy React课程笔记（四）

书籍购物车-React脚手架-目录分析-配置文件

虚拟DOM

创建过程

• 通过 React.createElement JSX 代码创建出来一个 ReactElement 对象
• ReactElement 对象组成了一个 JavaScript 对象树，这个JavaScript 对象树就是虚拟DOM
• 通过 ReactDOM.render 让虚拟DOM和真实DOM同步起来，React 官方称之为协调（Reconciliation），也就是将虚拟DOM转换为真实DOM并渲染

虚拟DOM原理

虚拟 DOM 是对真实 DOM 的抽象，它使用 JavaScript 对象来模拟一个个虚拟节点 VNode，一个 VNode 节点 包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，然后通过 children 属性层层嵌套，形成了一棵虚拟节点树结构。在 Vue 中，会先将 template 中的元素转换为一棵虚拟 DOM，再映射成真实 DOM。

为什么要使用虚拟DOM

• 虚拟 DOM 的作用在于高效更新页面，减少 JavaScript 操作真实 DOM 的带来的性能消耗。事实上，操作真实 DOM 非常消耗性能，每操作一次就要重新渲染一次。而虚拟 DOM 将更改先全部保存到 JavaScript 对象中，然后映射到真实 DOM 上，可以做到一次性更改 DOM。
• 虚拟 DOM 的优势在于实现了 diff 算法，当 DOM 发生变化的时候，通过 diff 算法比对 JavaScript 原生对象，计算出需要变更的 DOM，然后只对变化的 DOM 进行操作，而不是更新整个视图。 此外，由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、React Native、Node 等。

声明式编程思想

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式

只需要维护UI状态，剩下的事情交给 React 库来做，不需要直接对DOM进行操作。

书籍购物车案例

综合案例，建议听完老师的课自己去敲一遍，能收获到很多细节。

脚手架工具

脚手架其实是一种工具，帮我们快速生成项目的工程化结构。

可以帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好，例如常用的 Webpack、Babel 等。并在这个模板的基础之上进行开发，而不用从零开始搭建。

React 的脚手架工具是 create-react-app

安装与创建项目

npm install -g create-react-app
create-react-app project_name

启动项目

npm run start

目录结构

• public/index.html

  • HTML 页面模板，在里面写一个 id='root' 的 div 元素

• src/index.js

  • ReactDOM.createRoot 创建一个 root 根节点
  • JS 入口文件，使用 render 函数渲染根组件 App