关于react的虚拟DOM:
在前端开发的过程中，我们经常会做的一件事就是将变化的数据实时更新到UI上，这时就需要对DOM进行更新和重新渲染，而频繁的DOM操作通常是性能瓶颈产生的原因之一，有时候我们会遇到这样一种尴尬的情况：比如有一个列表数据，当用户执行刷新操作时，Ajax会重新从后台请求数据，即使新请求的数据和上次完全相同，DOM也会被全部更新一遍并进行重新渲染，这样就产生了不必要的性能开销。
React为此引入了虚拟DOM（Virtual DOM）机制：对于每一个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM构造都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分(Patchs)，然后将这些Patchs 再更新到真实DOM中。整个过程都是在内存中进行，因此是非常高效的。
搭建开发环境
npm+webpack+babel+react安装
1.新建项目名称app_1,执行一下命令cd app_1；mkdir src_file；mkdir output_file；touch webpack.config.js；cd src_file；touch index.js；mkdir component；这里等于在当前工程跟文件目录下新建了两个src_file和output_file文件夹，分别用来存放源代码以及打包输出的文件，在src_file里又创建了用作入口文件的index.js以及存放组件的目录component，另外，在根目录下还创建了webpack的配置文件webpack.config.js
2.执行命令npm install -y 该命令会在当前目录生成package.json，项目工程配置文件，-y的意思是在执行命令过程中有询问的环节全部用yes来回答，不用我们再一步步选择
3.安装webpack 执行命令 npm install webpack --save 打开webpack配置文件并做如下编辑module.exports = {
context: __dirname+"/src_file",
entry: {
path: "./index.js", /是根目录，./是当前目录，../父级目录
},
output: {
path: __dirname+"/output_file",filename: "boundle.js"
}
}
执行命令 node_modules/.bin/webpack 可以webpack已经成功打包并输出到目标文件夹，__dirname是全局变量，显示当前运行到脚本所在目录
4.安装react
网友评论