React笔记——篇III

react

DOM 的本质：

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

React 中的虚拟 DOM：

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

虚拟 DOM 的目的：

实现页面中 DOM 元素的高效更新。

Diff 算法：

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

component diff：在进行 Tree Diff的时候，每一层中，组件级别的对比，叫做 Component Diff;

如果对比前后，组件类型相同，则暂时认为此组件不需要被更新；

如果对比前后，组件类型不同，则需要移除旧组件，创建新组建，并追加到页面上；

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

运行npm init -y 快速初始化项目

在项目根目录创建 src 源代码目录和 dist 产品目录

在 src 目录下创建 index.html

使用 cnpm 安装 webpack，运行 cnpm i webpack weback-cli -D

全局运行 npm i cnpm -g（ cnpm 为国内 npm，相比较 npm 速度更好）

创建一个 webpack.config.js 文件，向外暴露一个打包的配置文件

在 webpack 4.x 中，有一个很大的特性，约定大于配置；约定，默认的打包入口路径是 src -> index.js

执行 webpack 命令，会在 dist 文件夹下自动生成一个 main.js 文件