react学习笔记（三）--- 虚拟DOM && diff算法 && 搭建webpack

第一篇介绍了一些react相关的小概念，这篇主要介绍一下react自身的一些核心概念。这篇的内容主要是虚拟dom && diff算法 && 搭建webpack

虚拟DOM相关⬇️

React中一切使用js来表现。Dom是浏览器端的概念，用js来表示页面上的元素，（浏览器）并提供可以操作元素的API
React的虚拟dom（virtual dom）本质是使用JS对象来模拟页面上的DOM嵌套关系。（虚拟dom以js对象的形式存在）
Dom是浏览器提供了可以操作的API，react的虚拟dom，是框架提供了js来模拟页面上的dom和dom嵌套，为了实现dom元素的实时高效更新。
DOM树，当浏览器从服务器请求过来数据后，浏览器在现有内存中解析dom结构，并在浏览器内存中，渲染产生dom树和css树。dom渲染到浏览器上，展现给用户使用。

如何实现dom元素实时按需更新？

数据可以分为新旧两个数据，旧数据为对比前的数据，新数据为调整后的目标数据。
按需更新的逻辑就是获取新旧两个dom，然后进行对比，得到需要被更新的两个dom。
那么问题来了，如何获取新旧两个dom树呢？

获取dom树？

手动模拟新旧两个dom树，如何手动模拟dom树-> 相当于如何模拟dom元素 -> 模拟dom元素的方式就是模拟dom树的方式 =》 使用js对象来模拟dom元素。
开发人员手动模拟出的不同dom树，其实就是react中虚拟dom的概念。

例子： 一个简单的自定义嵌套，使用js来模拟自定义嵌套

<div id=“add1” title=“标题处” data-index=“0”>
				目标target
				<p>子标签p标签</p>
			</div>
	js => var div = {
			tagName: “div”,  // 标签名称
			attr: {
				// 相关属性及其内容, 使用短横线方式的属性需要用单引号进行包裹
				id : ‘add1’,
				title : ‘标题处’,
				‘data-index’ : ‘0’
			},
			childrens : [
				‘目标target’，
				{
					// 子节点p标签本身
					tagName : ‘p’,
					attr : {}， // 由于没有属性及自定义属性，attr对象保持空即可
					childrends: [‘子标签p标签’]
				}
			]， // 此时div的子节点是「目标target文本本身，文本本身使用children子节点即可」
		}

diff算法

小感想：

Diff算法更多更好的适用于，整体数据中仅有部分不符合要求，因此使用diff算法扫描其中不同，按照规则重新渲染部分，达到要求。
仅部分数据需要渲染，若采取整体渲染，会影响渲染性能。因为若整体数据皆不符合，那其实并不需要考虑部分渲染以及渲染效率，直接全体重新加载即可。

Diff可以用来实现页面的按需更新，如果部分数据刷新，对新旧dom树对比更新。

概念来了：

Diff算法分为tree diff 树diff、 component diff 组件diff、 element diff 元素diff三种方式。下面从大到小逐层解释：

Tree diff dom树diff :

	新旧两颗dom树逐层进行对比。 整棵dom树逐层对比完毕，需要按需更新的元素肯定可以找到，因为对比的比较深入，用来对比整个树。

Component diff 组件diff ：

	用来对比树的每层，每个组件都需要进行对比，简单说就是tree diff时，每一层中，组件的对比叫做component diff。

element diff：

	如果tree diff 后， component diff后，发现组件对比通过，那就到了element diff了，需要对比组件中，元素级别的是否diff。

整个tree diff、 component diff 、 element diff的搭配使用是，首先对比整个dom树，如果整个dom树对比通过后，到component diff 组件对比，组件对比一致后，开始element diff，对元素进行对比。

搭建webpack

下面的是一种比较老的方式了，虽然说我们在创建react项目的时候直接都构建好了，不过可以使用这种方式自我尝试一下，加深一下自己的印象，对webpack也会多一点认知。

1. 建立 webpack文件夹，webpack-base文件夹名称
2.  cd webpack-base , npm init -y 创建一个包处理文件packet.json，快速触发项目
3. mkdir src , src用来放项目源代码； mkdir dist ，dist用来放打包好准备上线的
4.  在src下，创建index.html，main.js（作为入口文件） ，npm install webpack webpack-cli -D 安装webpack依赖
5.  Webpack在4.X的版本后，将打包与命令行的功能进行了分离。命令行的功能将有webpack-cli提供
6.  在根目录新建webpack.config.js文件
7.  Vim webpack.config.js 。 wepack 4.0+ 提供了约定大于配置的概念，为了尽量减少配置文件的体积
8. npm install webpack-dev-sever -D  安装webpack-dev-server依赖
9. vim package.json 在package.json里面添加代码，使运行代码时自动打开浏览器&实时更新代码

webpack.config.js 代码内容：

module.export用来暴露一个打包的配置对象，使用node语法，因为webpack是基于node构建的。因此webpack支持所有node api和语法

module.export = {
	mode： ‘development’ , //  ’development’是开发环境，’production’是生产环境即线上环境
	// webpack 4.0以上版本，默认打包路径是src的index.js
	entry: utils.getEnttries(‘./module/**/*.js’), // 默认打包路径， 从运营代码库的角度就是index下index.js/router.js以及share下的share.js/router.js
}

9 代码内容 ⬇️

	package.json:
		“scripts”： {
			“dev”: “webpake-dev-server —open —port 3000 —hot —progress — compress —host 127.0.0.1s”,  自动执行更新， —open是自动打开浏览器

		}