React笔记——篇III

react

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;

创建基本的 webpack4.x 项目

运行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 文件

以上是 React笔记——篇III 的全部内容, 来源链接: utcz.com/z/383704.html

回到顶部