react-03

2019-11-28

字数统计: 782字 | 阅读时长≈ 3分

DOM树的概念：

一个网页呈现的过程：

1、浏览器请求服务器获取页码HTML代码

2、浏览器要先在内存中，解析DOM结构，并在浏览器内存中，渲染一棵DOM树

3、浏览器把DOM树呈现到页面上

如何实现页面按需更新？

获取内存中的新旧两个DOM，进行对比，获得需要被按需更新的DOM元素

但是浏览器没有直接提供获取DOM树的API，因此无法拿到浏览器内存中的DOM树；

这需要我们手动模拟DOM树

<div id="mydiv" title="加油" data-index="0">
	春风十里不如你
	<p>哈哈哈</p>
</div>

var div = {
	tagName:'div'
	attrs:{
		id:'mydiv',
		title:'努力',
		data-index='0'
	},
	childrens:[
		'春风十里不如你',
		{
			tagName:'p',
			attrs:{},
			childrens:[
				“哈哈哈”
			]
		}
	]
}

虚拟DOM：框架中的概念。用JS对象的形式来模拟页面上的DOM嵌套关系，为了实现页面元素的高效更新。

diff算法

treediff：新旧两颗DOM树逐层对比
component：在进行treediff时，每一层中，组件级别的对比
- 如果对比前后组件类型相同，则暂时认为此组件不需要被更新；
- 如果对比前后组件类型不同，则需要移除旧组件，创建新组建，并追加到页面上；
element diff：组件类型相同，则需要进行元素级别的对比

创建基本的webpack4.X项目

1.新建文件夹，运行npm init -y初始化

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

3.在src创建index.html

4.使用npm安装 webpackcnpm i webpack webpack-cli -D

* 如果用cnpm需要用`npm i cnpm -g`

此处是在项目里安装webpack，我个人觉得可以全局安装webpack毕竟很常用。

5.注意：webpack 4.x提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积

* 默认约定了：
* 打包的入口是：`src` ->`index.js`
* 打包的输出文件是：`dist` ->`main.js`，可以在webpack.config.js里修改entry
* 4.x中新增了mode选项（必写），可选的值为：development和production

6.为了每次更新后不用重新打包，提高效率，用cnpm i webpack-dev-server -D，在package.json里添加"dev": "webpack-dev-server"，在此打包时可以直接在控制台输入npm run dev

同时可以在地址栏输入http://localhost:8080/可以看到

ES6中的特性 chrome支持哪些，则Node.js就支持哪些。Babel支持所有。

自己踩得大坑：

package.json文件的格式问题。

检查属性名称喝属性值是否都用 “”
括起来；

还有最后一个依赖的末尾不需要加 “，”；以及冒号问题。

“dev”: “webpack-dev-server –open firefox（通过火狐浏览器打开） –port 3000（修改端口号） –hot –progress（过程） –compress（网络压缩） –host 127.0.0.1（域名）”

内存比磁盘存储更快，webpack-server存在内存里不显示在目录上，所以要引用的时候路径要改成”\main.js”

cnpm i html-webpack-plugin -D

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react-03/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！