fengshi123 / blog Goto Github PK

前言

基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架，是 Weex？React-Native？还是Flutter? 无疑，相对于后两者，因为你现在已有比较熟练的 Vue 基础，如果在其他条件一致的情况，Weex 无疑是最佳选择；但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗？Weex 的开发效率、Weex 的质量是否满足需求？

本项目围绕前面提到的两点：基于 Weex 的开发效率如何？Weex 的质量是否满足需求？我们进行了相关的预研和开发，我们将在开发中遇到的问题和经验进行分享，如果你还没有 Weex 开发经验，那么这篇文章将很好的向你展示 Weex 的各方面，官方文档、生态、兼容性等等，希望你在这篇文章中找到你想要的答案。

辛苦整理良久，还望手动点赞鼓励~

博客 github地址为：https://github.com/fengshi123/blog ，汇总了作者的所有博客，也欢迎关注及 star ~

本项目 github 地址为：https://github.com/fengshi123/weex_project

一、开发环境

在这个 Weex app 开发中，我的开发环境相关配置如下：

二、Weex 介绍

2.1、Weex 理念

“Write once, run everywhere”, Weex 的定义就像是：写个 vue 前端，顺便帮你编译成性能还不错的 apk 和 ipa（当然，现实有时很骨感）。基于 Vue 设计模式，支持 web、android、ios 三端，原生端同样通过中间层转化，将控件和操作转化为原生逻辑来提高用户体验。 在 weex 中，主要包括三大部分：JS Bridge、Render、Dom，分别对应WXBridgeManager、WXRenderManager、WXDomManager，三部分通过 WXSDKManager 统一管理。其中 JS Bridge 和 Dom 都运行在独立的 HandlerThread 中，而 Render 运行在 UI 线程。 JS Bridge 主要用来和 JS 端实现进行双向通信，比如把 JS 端的 dom 结构传递给 Dom 线程。Dom 主要是用于负责 dom 的解析、映射、添加等等的操作，最后通知 UI 线程更新，而 Render 负责在 UI 线程中对 dom 实现渲染。

Weex 所有的标签也不是真实控件，JS 代码中所生成存的 dom，最后都是由 Native 端解析，再得到对应的 Native控件渲染，如 Android 中标签对应 WXTextView 控件。 Weex 中文件默认为 .vue ，而 vue 文件是被无法直接运行的，所以 vue 会被编译成 .js 格式的文件，Weex SDK会负责加载渲染这个 js 文件。Weex 可以做到跨三端的原理在于：在开发过程中，代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致的。不同的是在 JS Framework 层的最后，web 平台和 Native 平台，对 Virtual DOM 执行的解析方法是有区别的。

2.2、创建 Weex 基础项目

Weex 提供了一个命令行工具 weex-toolkit 来帮助开发者使用 Weex，它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。

我们可以通过以下步骤创建一个基础的 Weex 项目：

（1）安装 weex-toolkit 工具

npm install weex-toolkit -g

（2）创建新项目

weex create weex_project

（3）安装项目依赖

cd weex_project3
npm install

（4）启动项目

npm start

项目启动完毕，浏览器窗口会自动打开项目首页，如下图所示：

（5）添加 Android 平台

weex platform add android

（6）可以运行下面的命令，可以在模拟器或真实设备上启动 Android 应用：

weex run android

2.3、运行我们的项目

2.3.1、启动服务端应用

（1）进入目录 weex_project/backend/，安装服务端应用所需要的插件包：

$ npm install

（2）启动服务端应用

$ npm run start

2.3.2、启动 Weex 应用

（1）如果你还没安装 weex 工具，可以运行以下命令进行安装：

$ npm install -g weex-toolkit

（2）安装项目需要的插件包：

$ npm install

（3）启动项目：

$ npm run start

三、Weex 常用的 VSCode 第三方插件

VSCode 拓展包包含下面的包:

• weex-new-project - 用于在 VSCode 中创建Weex项目；
• weex-lang - 用于在 VSCode 中对最新的 Weex 语法进行支持；
• weex-doctor - 用于检查 iOS 和 Android 本地开发环境；
• weex-debugger - 用于在 VSCode 中启动Weex调试工具；
• weex-run - 用于在热更新模式下启动 Android 及 iOS 工程；

我们主要介绍最好用的 weex-run 和 weex-debug，因为 weex-run 其可用于在热更新模式下启动 Android 及 iOS 工程；weex-debug 可用于安卓端的调试。其它的插件使用，可以查看 Weex 官网 VS Code 插件部分 ，下面我们分别介绍 weex-run 和 weex-debug：

3.1、weex-run 的使用

（1）通过截图的步骤来安装 weex-run

（2）启动 Android 项目

启动成功控制台输出（启动需要一定时间，如果没有报错，敬请耐心等待）：

我们查看 Android 项目的热更新：

3.2、weex-debugger 的使用

（1）安装 weex-debugger 插件

（2）ctrl + shift + p 弹出命令输入框，如下图所示输入：weex debug，然后网页会出现第 2 张截图的二维码：

（3）用手机的 Weex Playground App 的二维码进行扫描，出现以下调试页面（一定一定要注意，手机连的 WiFi 和 你开发本地网络在同一局域网）。

（4）再用手机的 Weex Playground App 的二维码扫描 Weex 应用的二维码，调试页面就会变成对应的 Weex 应用的调试页面，如下图所示：

四、Weex 项目介绍

4.1、项目目录路径

Weex 项目的目录结构如下：

4.2、功能模块设计

考虑到更好的体验 Weex 和 H5 在开发效率、功能性能、用户体验等方面的差异性，我们对功能模块进行精心设计，主要基于我们现在实际项目的业务，结合移动端特有的特性。相关的模块功能设计如下图所示，其中红色标注部分表示，受限于开发资源、Weex 生态方面原因，我们暂时还没完成的功能。

4.3、功能界面展示

我们截取一些功能界面展示如下：

4.4、重要功能介绍

我们不介绍这个项目全部功能的实现，其它常规的功能开发，参照 Weex 官网即可，以下介绍的几个功能在 Weex 官网中并没有详细介绍或者根本没有介绍，我们在开发过程中踩了不少坑，因此将踩坑经验进行汇总，帮助大家避免踩坑：

（1）登录 token 认证

（2）图片选择/上传功能

（3）websocket 功能实现

（4）手机物理键返回上一级功能

（5）Android 如何显示本地图片

4.4.1、token 认证功能

（1）token 简要介绍

在 Web 领域基于 token 的身份验证随处可见。在大多数使用 Web API 的互联网公司中，tokens 是多用户下处理认证的最佳方式。token 具有以下特性：

• 无状态、可扩展
• 支持移动设备
• 跨程序调用
• 安全

基于 token 的身份验证的过程如下：

• 用户通过用户名和密码发送请求。
• 服务端程序验证。
• 程序返回一个签名的 token 给客户端。
• 客户端储存 token，并且每次用于每次发送请求。
• 服务端验证 token 并返回数据。

（2）weex 和 express 之间实现 token 认证

express 服务端主要使用 express-jwt 插件，express-jwt 是 nodejs 的一个中间件，内部对 jsonwebtoken 进行封装使用。express-jwt 会验证指定 http 请求的 jsonwebtoken 的有效性，如果有效就将 jsonwebtoken 的值设置到 req.user 里面，然后跳转到相应的 router。

服务端 express 的代码逻辑如下：

var expressJWT = require('express-jwt');
// token 设置
app.use(expressJWT({
  secret: CONSTANT.SECRET_KEY
}).unless({
  // 除了以下配置的地址，其他的URL都需要验证
  path: ['/getToken', /^\/public\/.*/, /^\/user_disk\/.*/]
}));

// 登录时，需要进行用户密码认证，相应路由跳转到下面一步
app.use('/getToken', tokenRouter);

// 当用户密码正确时，我们进行 token 设置
data: {
  token: jsonWebToken.sign({
    uid: obj.uid
  }, CONSTANT.SECRET_KEY, {
    expiresIn: 60 * 60 * 1
  }),
}

Weex 的代码逻辑如下：

// Weex 登录逻辑
login () {
  let param = {
	uid: this.uid,
	password: this.password
  };
  let options = {
	url: '/getToken',
	method: 'POST',
	body: JSON.stringify(param)
  };
  let vm = this;
  api.fetch(options, function (ret) {
	if (ret.ok && ret.data.code === 0) {
      // 前端可以获取到服务端返回的 token ，并将其作为全局变量  
	  global.token = 'Bearer ' + ret.data.data.token;
	  vm.$router.push('/tabIndex');
	} else {
	  modal.toast({
		message: '用户认证失败!',
		duration: 1
	  });
	}
  });
}

// Weex 的每次请求，头部都带上 token
initOptions.headers['Authorization'] = global.token;

经过以上代码逻辑处理后，我们查看 Weex 向服务端发送的请求头部，都携带了 token，如下图所示。这样服务端 express 处理这个请求时，就可以通过解析 token 获取到对应的用户 id ，从而允许其对服务端的数据访问。

4.4.2、图片选择/上传功能

（1）存在问题

很遗憾，Weex 竟然没有提供文件选择/上传的模块，对于前端开发者来说无疑晴天霹雳，那我不是要手动去写 Android 的 java 代码，经过反复查找，真的没有文件选择/上传模块，于是我们只能自己去写 Java 代码去实现 Android 端图片选择以及上传功能。

（2）实现 Android 原生的图片选择/上传功能

在 weex_project\platforms\android\app\src\main\java\com\weex\app\extend 目录下新建 图片上传 模块的类 WXAlbumModule ，其继承 WXModule ，其主要两个方法为 choosePhoto 和 onActivityResult ，其中 choosePhoto 用于给 Weex 前端来调用，当 Weex 前端需要选择相册中的图片时，Weex 前端就调用 choosePhoto 方法；onActivityResult 是用户选择好相册中的图片后，会相应触发该事件，并将用户选择的相片以参数形式传入 onActivityResult ，从而我们可以在 onActivityResult 中进行图片的上传逻辑，图片上传完成后，Android 端会在回调事件中通知前端，图片放置在服务端的目录路径，前端可以对应进行图片显示等操作。关键代码逻辑如下，如果如果对 Java 完全一无所知的同学可以先不看，懂 java 代码的建议结合项目代码来看，会更清晰。

@JSMethod(uiThread = true)
// 给 Weex 前端调用，当用户点击时，调用该函数
public void choosePhoto(String param, JSCallback callback) {
	if (ContextCompat.checkSelfPermission(mWXSDKInstance.getContext(),
			Manifest.permission.WRITE_EXTERNAL_STORAGE)
			!= PackageManager.PERMISSION_GRANTED) {
		ActivityCompat.requestPermissions((WXPageActivity) mWXSDKInstance.getContext(),
				new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},
				CAMERA_REQUEST_CODE);
	} else {
		choosePhoto();
	}
	try{
		JSONObject jsonObject = new JSONObject(param);
		this.type = (String)jsonObject.get("type");
		this.path = (String)jsonObject.get("path");
		this.url = (String)jsonObject.get("url");
		this.token = (String)jsonObject.get("token");
	}catch (JSONException e){
		e.printStackTrace();
	}
	this.callback = callback;
}

@Override
// 用户选择好相册中的图片后，会相应触发该事件，并将用户选择的相片以参数形式传入
public void onActivityResult(int requestCode, int resultCode, Intent data) {
	if (resultCode == WXPageActivity.RESULT_OK) {
		switch (requestCode) {
			case CAMERA_REQUEST_CODE: {
				try {
					Uri selectedImage = data.getData();
					String[] filePathColumns = {MediaStore.Images.Media.DATA};
					Cursor c = mWXSDKInstance.getContext().getContentResolver().query(selectedImage, filePathColumns, null, null, null);
					c.moveToFirst();
					int columnIndex = c.getColumnIndex(filePathColumns[0]);
					String picturePath = c.getString(columnIndex);
					c.close();

					//上传的文件
					File file = new File(picturePath);
					// 普通参数
					HashMap<String , String> params = new HashMap<>();
					params.put("path", this.path);
					uploadForm(params, "file", file, "", this.url);

				} catch (Exception e) {
					e.printStackTrace();
				}
				break;
			}
		}
	}
	super.onActivityResult(requestCode, resultCode, data);
}

实现好以上选择图片和上传图片的代码逻辑后，我们需要在 weex_project\platforms\android\app\src\main\java\WXApplication.java 中进行模块的注册，代码逻辑如下：

WXSDKEngine.registerModule("wxalbum", WXAlbumModule.class);

Weex 前端进行调用：

const WXAlbum = weex.requireModule('wxalbum');

upload () {
  let path = 'public/upload/';
  let vm = this;
  storage.getItem('token', event => {
	let param = {
	  type: 'image/jpeg', // 选择的数据类型
	  path: path,
	  url: CONSTANT.SERVER_URL + '/users/upload',
	  token: event.data
	};
	WXAlbum.choosePhoto(JSON.stringify(param), ret => {
	  let obj = JSON.parse(ret);
	  vm.imgPath = '/' + path + obj.file[0].originalFilename;
	  modal.alert({
		message: vm.imgPath,
		okTitle: '确认'
	  }, function () {
		console.log('alert callback')
	  })
	});
  })
},

4.4.3、WebSocket 功能实现

（1）存在问题

Weex 官网的 webSocket 章节特意标注以下警告字眼：

h5 提供 WebSockets 的 protocol 默认实现，iOS 和 Android 需要自定义实现，Android 可参考:

• DefaultWebSocketAdapter.java
• DefaultWebSocketAdapterFactory.java

好吧，根本没有封装 WebSocket 功能，那我就按官网给的参考来实现吧，于是，我点击前面两个参考链接，链接打开的页面根本不存在，报 404（官网出现这种问题，实在不应该啊）。网上谷歌搜索一圈，没有发现类似的问题，还是主要查看了这个给的 url 以及结合阿里将 weex 贡献给 Apache 维护这个事情，猜测是不是 Weex 捐给 Apache 维护，github 的库目录更改，但是官网对应的 url 地址没有做修改。经过查找，确实是这个问题，在旧库中以下目录找到官网提的：DefaultWebSocketAdapter.java 和 DefaultWebSocketAdapterFactor.java :

https://github.com/alibaba/weex/tree/master/android/commons/src/main/java/com/alibaba/weex/commons/adapter

（2）手动实现 WebSocket 功能

我们 在 weex_project\platforms\android\app\src\main\java\com\weex\app\adapter 目录底下创建 Websocket 的实现类 DefaultWebSocketAdapter.java 和工厂创建类 DefaultWebSocketAdapterFactory.java ，关键逻辑代码如下：

// 该类主要实现 Websocket 的连接、发送消息、接收消息、关闭等函数或事件
public class DefaultWebSocketAdapter implements IWebSocketAdapter {
  @Override
  public void connect(){...}
  @Override
  public void send(String data) {...}
  @Override
  public void close(int code, String reason) {...}
  @Override
  public void destroy() {...}
  ...  
}

// 该类主要为创建 Websocket 对象的工厂类
public class DefaultWebSocketAdapterFactory implements IWebSocketAdapterFactory {
    @Override
    public IWebSocketAdapter createWebSocketAdapter() {
        return new DefaultWebSocketAdapter();
    }
}

在 weex_project\platforms\android\app\src\main\java\com\weex\app\WXApplication.java 中初始化 Websocket ：

WXSDKEngine.initialize(this,
        new InitConfig.Builder().setImgAdapter(new ImageAdapter()).                        setWebSocketAdapterFactory(new DefaultWebSocketAdapterFactory()).build()
);

在 Weex 的前端中使用 Websocket，相关代码如下：

const ws = weex.requireModule('webSocket');

ws.WebSocket(CONSTANT.SOCKET_WS, '');
// 需要注意 web 端的写法和 android 端的写法不一样
// android 的 onxx 事件是一个方法，需要传入一个JSCallback的值，
if (weex.config.env.platform === 'Web') {
  ws.onmessage = this.socketMessage;
} else {
  ws.onmessage(this.socketMessage);
}

4.4.4、点击手机物理键返回上一级功能

（1）存在问题

我们开发的 Weex app，如果在 app 的哪个界面，点击手机的返回上一级物理键，都会导致 app 退出，好吧，Weex 也没有提供对应的事件处理，我们不得不自己再去写安卓的 java 代码去向 Weex 的 Web 端抛出这个事件。

（2）重写手机物理键返回上一级的处理逻辑

正常交互逻辑：当处于主界面时，返回上一级物理键会进行提示“再点击一次退出”，如果不是处于主界面时，会返回上一级页面。我们的实现：

在 weex_project\platforms\android\app\src\main\java\com\weex\app\WXPageActivity.java 中添加监听点击手机物理键的事件：

  public void onBackPressed(){
    Map<String,Object> params=new HashMap<>();
    params.put("name","msg");
    mInstance.fireGlobalEventCallback("androidback",params);
  }

在 Weex 的 vue 入口文件中，监听 androidback 事件，当接收到该事件时，进行相应的逻辑处理，代码如下所示：

listenAndroidBack () {
  let vm = this;
  globalEvent.addEventListener('androidback', function (e) {
	if (vm.$route.name === 'tabIndex' || vm.$route.name === 'loginPage') {
	  if (vm.exitFlag) {
		weex.requireModule('wxclose').closeApp();
	  } else {
		modal.toast({
		  message: '再点一次退出',
		  duration: 1
		});
		vm.exitFlag = true;
		vm.clearExitFlag();
	  }
	} else {
	  vm.$router.go(-1);
	}
  });
},

4.4.5、Android 如何显示本地图片

（1）存在问题

Weex 官网中 image 图片组件显示项目目录下图片，src 地址直接写成相对路径，如下所示；但是这种写法存在问题，它只支持 web 端的显示，在 Android 端是无法显示的，找不到对应图片。

<image ref="poster" src="path/to/image.png"></image>

（2）Android/IOS 端显示本地图片

Weex 没有在将 vue 编译成 Android 组件时，对应将图片放置到 Android 对应的目录下，所以我们只好自己将图片手动再放置一份，其中 Android 端需要额外将图片放在 /platforms/android/app/src/main/res/drawable-xxhdpi ，IOS 放入xcode 底下的 /Source/images/下 ，然后我们在代码逻辑中，根据环境判断现在是 Web 环境、Android 环境或者 IOS 环境，再对应的获取对应目录下的图片（暂时只能做到这种程度了...），如下代码所示:

const ICON_URL = {
  Web: `${WEB_IMAGE_URL}`,
   android: `local:///${pureName}`,
   iOS: `local:///filePng/${pureName}${suffixName}`
}
return ICON_URL[CUR_RUN_PLATFORM];

五、编译 Android apk

Android apk 打包分 debug 版和 release 版，通常所说的打包指生成 release 版的 apk，release 版的 apk 会比debug 版的小，release 版的还会进行混淆和用自己的 keystore 签名，以防止别人反编译后重新打包替换你的应用。 下面我们主要介绍如何在 Android Studio 中对 weex 项目进行打包。

5.1、Android 平台目录

Android Studio 打开 Android 工程，目录为：weex 项目 /platforms/android 。

5.2、常规的 AS 打包分为两种

• 一种是没有 “.jks” 文件的打包
• 一种是有 “.jks” 文件的打包

注：.jks” 文件 类似 apk 身份证；

5.3、没有 “ .jks ” 文件的打包

（1）打包步骤如下截图：

（2）我们点击选择 Create new

（3）生成 jks

（4）填写 key 的相关信息

（5）点击 OK 之后，可以看到如下信息已被自动填充

（6）点击 Next

（7）点击 Finish 后，会看到 Android Studio 底部显示正在打包

（8）打包完成，会看到 Android Studio 右下角会显示打包成功的提示

（9）查看打包好的 apk 文件

5.4、有 “.jks” 文件的打包

有 “.jks” 文件的打包 比 没有 ".jks" 文件的打包简单很多，直接点击 Choose existing... ，进行选择 .jks 文件，其它步骤跟没有 ".jks" 文件的打包一样，这里不再赘述。

六、Weex 开发存在的坑

6.1、官网经常无法访问

Weex 官网经常出现无法访问的情况，频率大概一周至少一次；这就很影响开发效率了，因为在开发过程中需要经常查看官网的写法、说明等，如果访问不了，则会造成一定程度的开发 block；

6.2、官网文档粗糙

Weex 官网的文档比较粗糙，如果没有比较好的前端和移动端原生开发知识储备的话，看官网的文档就很吃力了，官网很多讲解写的非常简单，都默认你同时熟练前端和移动端原生开发，而且同时有较好前端和移动端原生开发人员应该在业界还比较少吧；

6.3、生态贫瘠

Weex 生态是真的贫瘠，除了阿里自己出产的组件库 weex-ui 外，其它的相关插件几乎找不到，有也是少于100个 star 的，例如我在项目开始前设计的一些功能：拍照、图片选择上传、语音录入、通讯、定位、文件预览等等移动端的特有功能，都没有插件，都需要自己去写 Android 的原生代码，那这时就失去了利用框架提高开发效率的意义；生态跟 react-native 差的真不是一丁半点，而是根本不是一个量级；

6.4、是否两个 Weex 版本

结合上一点，坊间传闻：Weex 存在两个版本，一个版本是阿里内部使用的，一个是非阿里内部使用；这个传言无从验证，但是结合第2点说的 Weex 生态贫瘠，我却无意在浏览器搜索中，发现了一系列常见功能的插件封装：https://weex.apache.org/zh/biz-component/ ，截图如下，但是这些插件并没有提供出来使用，存在 Weex 官网中，但是却没有访问入口。如果这些插件功能能提供使用，无疑将很大程度丰富 Weex 的生态。

6.5、三端兼容性不好

Weex 号称 “一次撰写，多端运行”，但是存在很多兼容性问题，比如我们在 Web 端调试开完后一个功能模块，但是在 Android 端一运行，就各种跑不通，各种兼容性问题；这种问题导致，我们后期根本不敢在 Web 环境开发，例如：我们这个项目是想开发个 Android 的 app，我们最终都直接在 Android 环境下开发，这种效率肯定就没有在 Web 环境开发效率高。

6.6、Vue 支持度不够

Weex 默认集成 Vue 框架，而且主打 Vue 受众，但是 Weex 对 Vue 的支持度还不够，除了官网上提到的那些 vue 特性不支持外，还有很多特性没有被列出，例如：vuex 等。

七、总结

本文主要基于 Weex 框架的实践进行总结，分享了 Weex 理念、Weex 的 VSCode 的第三发插件、Weex 项目的功能介绍、Weex 项目编译以及 Weex 存在的一些问题，希望对完全阅读完的你有启发和帮助，如果有不足，欢迎批评、指正、交流！

预期 十一月份 会推出姊妹篇《react-native 实践总结》，敬请关注！

辛苦整理良久，还望手动点赞鼓励~

博客 github地址为：https://github.com/fengshi123/blog ，汇总了作者的所有博客，也欢迎关注及 star ~

本项目 github 地址为：https://github.com/fengshi123/weex_project

前言

使用 Vue 做项目也有两年时间了，对 Vue 的 api 也用的比较得心应手了，虽然对 Vue 的一些实现原理也耳有所闻，例如 虚拟DOM、flow、数据驱动、路由原理等等，但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的，所以利用空闲时间，进行 Vue 框架相关技术原理和 Vue 框架的具体实现的整理。如果你对 Vue 的实现原理很感兴趣，那么就可以开始这系列文章的阅读，将会为你打开 Vue 的底层世界大门，对它的实现细节一探究竟。 本文为 Virtual DOM的技术原理和 Vue 框架的具体实现。

辛苦编写良久，还望手动点赞鼓励~

github地址为：github.com/fengshi123/…，上面汇总了作者所有的博客文章，如果喜欢或者有所启发，请帮忙给个 star ~，对作者也是一种鼓励。

一、真实DOM和其解析流程

本节我们主要介绍真实 DOM 的解析过程，通过介绍其解析过程以及存在的问题，从而引出为什么需要虚拟DOM。一图胜千言，如下图为 webkit 渲染引擎工作流程图

所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。

• 第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；

• 第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；

• 第三步，构建 Render 树：将 DOM 树和样式表关联起来，构建一棵 Render 树（Attachment）。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer），这些 render 对象最终会被构建成一棵 Render 树；

• 第四步，确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标；

• 第五步，绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

注意点：

1、DOM 树的构建是文档加载完成开始的？ 构建 DOM 树是一个渐进过程，为达到更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个 HTML 文档解析完成之后才开始构建 render 树和布局。

2、Render 树是 DOM 树和 CSS 样式表构建完毕后才开始构建的？ 这三个过程在实际进行的时候并不是完全独立的，而是会有交叉，会一边加载，一边解析，以及一边渲染。

3、CSS 的解析注意点？ CSS 的解析是从右往左逆向解析的，嵌套标签越多，解析越慢。

4、JS 操作真实 DOM 的代价？ 用我们传统的开发模式，原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行10 次。例如，第一次计算完，紧接着下一个 DOM 更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算 DOM 节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作 DOM 的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

二、Virtual-DOM 基础

2.1、虚拟 DOM 的好处

​ 虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性 attch 到 DOM 树上，再进行后续操作，避免大量无谓的计算量。所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。

2.2、算法实现

2.2.1、用 JS 对象模拟 DOM 树

（1）如何用 JS 对象模拟 DOM 树

例如一个真实的 DOM 节点如下：

<div id="virtual-dom">
<p>Virtual DOM</p>
<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>
<div>Hello World</div>
</div> 

我们用 JavaScript 对象来表示 DOM 节点，使用对象的属性记录节点的类型、属性、子节点等。

element.js 中表示节点对象代码如下：

/**
 * Element virdual-dom 对象定义
 * @param {String} tagName - dom 元素名称
 * @param {Object} props - dom 属性
 * @param {Array<Element|String>} - 子节点
 */
function Element(tagName, props, children) {
    this.tagName = tagName
    this.props = props
    this.children = children
    // dom 元素的 key 值，用作唯一标识符
    if(props.key){
       this.key = props.key
    }
    var count = 0
    children.forEach(function (child, i) {
        if (child instanceof Element) {
            count += child.count
        } else {
            children[i] = '' + child
        }
        count++
    })
    // 子元素个数
    this.count = count
}

function createElement(tagName, props, children){
 return new Element(tagName, props, children);
}

module.exports = createElement;

根据 element 对象的设定，则上面的 DOM 结构就可以简单表示为：

var el = require("./element.js");
var ul = el('div',{id:'virtual-dom'},[
  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [
	el('li', { class: 'item' }, ['Item 1']),
	el('li', { class: 'item' }, ['Item 2']),
	el('li', { class: 'item' }, ['Item 3'])
  ]),
  el('div',{},['Hello World'])
]) 

现在 ul 就是我们用 JavaScript 对象表示的 DOM 结构，我们输出查看 ul 对应的数据结构如下：

（2）渲染用 JS 表示的 DOM 对象

但是页面上并没有这个结构，下一步我们介绍如何将 ul 渲染成页面上真实的 DOM 结构，相关渲染函数如下：

/**
 * render 将virdual-dom 对象渲染为实际 DOM 元素
 */
Element.prototype.render = function () {
    var el = document.createElement(this.tagName)
    var props = this.props
    // 设置节点的DOM属性
    for (var propName in props) {
        var propValue = props[propName]
        el.setAttribute(propName, propValue)
    }

    var children = this.children || []
    children.forEach(function (child) {
        var childEl = (child instanceof Element)
            ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
            : document.createTextNode(child) // 如果字符串，只构建文本节点
        el.appendChild(childEl)
    })
    return el
} 

我们通过查看以上 render 方法，会根据 tagName 构建一个真正的 DOM 节点，然后设置这个节点的属性，最后递归地把自己的子节点也构建起来。

我们将构建好的 DOM 结构添加到页面 body 上面，如下：

ulRoot = ul.render();
document.body.appendChild(ulRoot); 

这样，页面 body 里面就有真正的 DOM 结构，效果如下图所示：

2.2.2、比较两棵虚拟 DOM 树的差异 — diff 算法

diff 算法用来比较两棵 Virtual DOM 树的差异，如果需要两棵树的完全比较，那么 diff 算法的时间复杂度为O(n^3)。但是在前端当中，你很少会跨越层级地移动 DOM 元素，所以 Virtual DOM 只会对同一个层级的元素进行对比，如下图所示， div 只会和同一层级的 div 对比，第二层级的只会跟第二层级对比，这样算法复杂度就可以达到 O(n)。

（1）深度优先遍历，记录差异

在实际的代码中，会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个唯一的标记：

在深度优先遍历的时候，每遍历到一个节点就把该节点和新的的树进行对比。如果有差异的话就记录到一个对象里面。

// diff 函数，对比两棵树
function diff(oldTree, newTree) {
  var index = 0 // 当前节点的标志
  var patches = {} // 用来记录每个节点差异的对象
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

// 对两棵树进行深度优先遍历
function dfsWalk(oldNode, newNode, index, patches) {
  var currentPatch = []
  if (typeof (oldNode) === "string" && typeof (newNode) === "string") {
    // 文本内容改变
    if (newNode !== oldNode) {
      currentPatch.push({ type: patch.TEXT, content: newNode })
    }
  } else if (newNode!=null && oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
    // 节点相同，比较属性
    var propsPatches = diffProps(oldNode, newNode)
    if (propsPatches) {
      currentPatch.push({ type: patch.PROPS, props: propsPatches })
    }
    // 比较子节点，如果子节点有'ignore'属性，则不需要比较
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }
  } else if(newNode !== null){
    // 新节点和旧节点不同，用 replace 替换
    currentPatch.push({ type: patch.REPLACE, node: newNode })
  }

  if (currentPatch.length) {
    patches[index] = currentPatch
  }
} 

从以上可以得出，patches[1] 表示 p ，patches[3] 表示 ul ，以此类推。

（2）差异类型

DOM 操作导致的差异类型包括以下几种：

• 节点替换：节点改变了，例如将上面的 div 换成 h1;
• 顺序互换：移动、删除、新增子节点，例如上面 div 的子节点，把 p 和 ul 顺序互换；
• 属性更改：修改了节点的属性，例如把上面 li 的 class 样式类删除；
• 文本改变：改变文本节点的文本内容，例如将上面 p 节点的文本内容更改为 “Real Dom”；

以上描述的几种差异类型在代码中定义如下所示：

var REPLACE = 0 // 替换原先的节点
var REORDER = 1 // 重新排序
var PROPS = 2 // 修改了节点的属性
var TEXT = 3 // 文本内容改变 

（3）列表对比算法

​ 子节点的对比算法，例如 p, ul, div 的顺序换成了 div, p, ul。这个该怎么对比？如果按照同层级进行顺序对比的话，它们都会被替换掉。如 p 和 div 的 tagName 不同，p 会被 div 所替代。最终，三个节点都会被替换，这样 DOM 开销就非常大。而实际上是不需要替换节点，而只需要经过节点移动就可以达到，我们只需知道怎么进行移动。

​ 将这个问题抽象出来其实就是字符串的最小编辑距离问题（Edition Distance），最常见的解决方法是 Levenshtein Distance , Levenshtein Distance 是一个度量两个字符序列之间差异的字符串度量标准，两个单词之间的 Levenshtein Distance 是将一个单词转换为另一个单词所需的单字符编辑（插入、删除或替换）的最小数量。Levenshtein Distance 是1965年由苏联数学家 Vladimir Levenshtein 发明的。Levenshtein Distance 也被称为编辑距离（Edit Distance），通过动态规划求解，时间复杂度为 O(M*N)。

定义：对于两个字符串 a、b，则他们的 Levenshtein Distance 为：

示例：字符串 a 和 b，a=“abcde” ，b=“cabef”，根据上面给出的计算公式，则他们的 Levenshtein Distance 的计算过程如下：

本文的 demo 使用插件 list-diff2 算法进行比较，该算法的时间复杂度伟 O(n*m)，虽然该算法并非最优的算法，但是用于对于 dom 元素的常规操作是足够的。该算法具体的实现过程这里不再详细介绍，该算法的具体介绍可以参照：https://github.com/livoras/list-diff

（4）实例输出

两个虚拟 DOM 对象如下图所示，其中 ul1 表示原有的虚拟 DOM 树，ul2 表示改变后的虚拟 DOM 树

var ul1 = el('div',{id:'virtual-dom'},[
  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [
	el('li', { class: 'item' }, ['Item 1']),
	el('li', { class: 'item' }, ['Item 2']),
	el('li', { class: 'item' }, ['Item 3'])
  ]),
  el('div',{},['Hello World'])
]) 
var ul2 = el('div',{id:'virtual-dom'},[
  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [
	el('li', { class: 'item' }, ['Item 21']),
	el('li', { class: 'item' }, ['Item 23'])
  ]),
  el('p',{},['Hello World'])
]) 
var patches = diff(ul1,ul2);
console.log('patches:',patches);

我们查看输出的两个虚拟 DOM 对象之间的差异对象如下图所示，我们能通过差异对象得到，两个虚拟 DOM 对象之间进行了哪些变化，从而根据这个差异对象（patches）更改原先的真实 DOM 结构，从而将页面的 DOM 结构进行更改。

2.2.3、将两个虚拟 DOM 对象的差异应用到真正的 DOM 树

（1）深度优先遍历 DOM 树

​ 因为步骤一所构建的 JavaScript 对象树和 render 出来真正的 DOM 树的信息、结构是一样的。所以我们可以对那棵 DOM 树也进行深度优先的遍历，遍历的时候从步骤二生成的 patches 对象中找出当前遍历的节点差异，如下相关代码所示：

function patch (node, patches) {
  var walker = {index: 0}
  dfsWalk(node, walker, patches)
}

function dfsWalk (node, walker, patches) {
  // 从patches拿出当前节点的差异
  var currentPatches = patches[walker.index]

  var len = node.childNodes
    ? node.childNodes.length
    : 0
  // 深度遍历子节点
  for (var i = 0; i < len; i++) {
    var child = node.childNodes[i]
    walker.index++
    dfsWalk(child, walker, patches)
  }
  // 对当前节点进行DOM操作
  if (currentPatches) {
    applyPatches(node, currentPatches)
  }
} 

（2）对原有 DOM 树进行 DOM 操作

我们根据不同类型的差异对当前节点进行不同的 DOM 操作 ，例如如果进行了节点替换，就进行节点替换 DOM 操作；如果节点文本发生了改变，则进行文本替换的 DOM 操作；以及子节点重排、属性改变等 DOM 操作，相关代码如 applyPatches 所示 ：

function applyPatches (node, currentPatches) {
  currentPatches.forEach(currentPatch => {
    switch (currentPatch.type) {
      case REPLACE:
        var newNode = (typeof currentPatch.node === 'string')
          ? document.createTextNode(currentPatch.node)
          : currentPatch.node.render()
        node.parentNode.replaceChild(newNode, node)
        break
      case REORDER:
        reorderChildren(node, currentPatch.moves)
        break
      case PROPS:
        setProps(node, currentPatch.props)
        break
      case TEXT:
        node.textContent = currentPatch.content
        break
      default:
        throw new Error('Unknown patch type ' + currentPatch.type)
    }
  })
} 

（3）DOM结构改变

通过将第 2.2.2 得到的两个 DOM 对象之间的差异，应用到第一个（原先）DOM 结构中，我们可以看到 DOM 结构进行了预期的变化，如下图所示：

2.3、结语

Virtual DOM 算法主要实现上面三个步骤来实现：

• 用 JS 对象模拟 DOM 树 — element.js

  <div id="virtual-dom">
  <p>Virtual DOM</p>
  <ul id="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
  <div>Hello World</div>
  </div> 

• 比较两棵虚拟 DOM 树的差异 — diff.js

  

• 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树 — patch.js

  function applyPatches (node, currentPatches) {
    currentPatches.forEach(currentPatch => {
      switch (currentPatch.type) {
        case REPLACE:
          var newNode = (typeof currentPatch.node === 'string')
            ? document.createTextNode(currentPatch.node)
            : currentPatch.node.render()
          node.parentNode.replaceChild(newNode, node)
          break
        case REORDER:
          reorderChildren(node, currentPatch.moves)
          break
        case PROPS:
          setProps(node, currentPatch.props)
          break
        case TEXT:
          node.textContent = currentPatch.content
          break
        default:
          throw new Error('Unknown patch type ' + currentPatch.type)
      }
    })
  } 

三、Vue 源码 Virtual-DOM 简析

我们从第二章节（Virtual-DOM 基础）中已经掌握 Virtual DOM 渲染成真实的 DOM 实际上要经历 VNode 的定义、diff、patch 等过程，所以本章节 Vue 源码的解析也按这几个过程来简析。

3.1、VNode 模拟 DOM 树

3.1.1、VNode 类简析

在 Vue.js 中，Virtual DOM 是用 VNode 这个 Class 去描述，它定义在 src/core/vdom/vnode.js 中 ，从以下代码块中可以看到 Vue.js 中的 Virtual DOM 的定义较为复杂一些，因为它这里包含了很多 Vue.js 的特性。实际上 Vue.js 中 Virtual DOM 是借鉴了一个开源库  snabbdom 的实现，然后加入了一些 Vue.js 的一些特性。

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  devtoolsMeta: ?Object; // used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }
}

这里千万不要因为 VNode 的这么属性而被吓到，或者咬紧牙去摸清楚每个属性的意义，其实，我们主要了解其几个核心的关键属性就差不多了，例如：

• tag 属性即这个vnode的标签属性
• data 属性包含了最后渲染成真实dom节点后，节点上的class，attribute，style以及绑定的事件
• children 属性是vnode的子节点
• text 属性是文本属性
• elm 属性为这个vnode对应的真实dom节点
• key 属性是vnode的标记，在diff过程中可以提高diff的效率

3.1.2、源码创建 VNode 过程

（1）初始化 vue

我们在实例化一个 vue 实例，也即 new Vue( ) 时，实际上是执行 src/core/instance/index.js 中定义的 Function 函数。

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

通过查看 Vue 的 function，我们知道 Vue 只能通过 new 关键字初始化，然后调用 this._init 方法，该方法在 src/core/instance/init.js 中定义。

  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
      
    // 省略一系列其它初始化的代码
      
    if (vm.$options.el) {
      console.log('vm.$options.el:',vm.$options.el);
      vm.$mount(vm.$options.el)
    }
  }

（2）Vue 实例挂载

Vue 中是通过 $mount 实例方法去挂载 dom 的，下面我们通过分析 compiler 版本的 mount 实现，相关源码在目录 src/platforms/web/entry-runtime-with-compiler.js 文件中定义：。

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  
   // 省略一系列初始化以及逻辑判断代码  
 
  return mount.call(this, el, hydrating)
}

我们发现最终还是调用用原先原型上的 $mount 方法挂载 ，原先原型上的 $mount 方法在 src/platforms/web/runtime/index.js 中定义 。

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

我们发现$mount 方法实际上会去调用 mountComponent 方法，这个方法定义在 src/core/instance/lifecycle.js 文件中

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 省略一系列其它代码
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      // 生成虚拟 vnode   
      const vnode = vm._render()
      // 更新 DOM
      vm._update(vnode, hydrating)
     
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // 实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法  
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  return vm
}

从上面的代码可以看到，mountComponent 核心就是先实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，在此方法中调用 vm._render 方法先生成虚拟 Node，最终调用 vm._update 更新 DOM。

（3）创建虚拟 Node

Vue 的 _render 方法是实例的一个私有方法，它用来把实例渲染成一个虚拟 Node。它的定义在 src/core/instance/render.js 文件中：

 Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    let vnode
    try {
      // 省略一系列代码  
      currentRenderingInstance = vm
      // 调用 createElement 方法来返回 vnode
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      handleError(e, vm, `render`){}
    }
    // set parent
    vnode.parent = _parentVnode
    console.log("vnode...:",vnode);
    return vnode
  }

Vue.js 利用 _createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js 中：

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
    
  // 省略一系列非主线代码
  
  if (normalizationType === ALWAYS_NORMALIZE) {
    // 场景是 render 函数不是编译生成的
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    // 场景是 render 函数是编译生成的
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // 创建虚拟 vnode
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

_createElement 方法有 5 个参数，context 表示 VNode 的上下文环境，它是 Component 类型；tag表示标签，它可以是一个字符串，也可以是一个 Component；data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到它的定义；children 表示当前 VNode 的子节点，它是任意类型的，需要被规范为标准的 VNode 数组；

3.1.3、实例查看

为了更直观查看我们平时写的 Vue 代码如何用 VNode 类来表示，我们通过一个实例的转换进行更深刻了解。

例如，实例化一个 Vue 实例：

  var app = new Vue({
    el: '#app',
    render: function (createElement) {
      return createElement('div', {
        attrs: {
          id: 'app',
          class: "class_box"
        },
      }, this.message)
    },
    data: {
      message: 'Hello Vue!'
    }
  })

我们打印出其对应的 VNode 表示：

3.2、diff 过程

3.2.1、Vue.js 源码的 diff 调用逻辑

Vue.js 源码实例化了一个 watcher，这个 ~ 被添加到了在模板当中所绑定变量的依赖当中，一旦 model 中的响应式的数据发生了变化，这些响应式的数据所维护的 dep 数组便会调用 dep.notify() 方法完成所有依赖遍历执行的工作，这包括视图的更新，即 updateComponent 方法的调用。watcher 和 updateComponent 方法定义在  src/core/instance/lifecycle.js 文件中 。

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 省略一系列其它代码
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      // 生成虚拟 vnode   
      const vnode = vm._render()
      // 更新 DOM
      vm._update(vnode, hydrating)
     
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // 实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法  
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  return vm
}

完成视图的更新工作事实上就是调用了vm._update方法，这个方法接收的第一个参数是刚生成的Vnode，调用的vm._update方法定义在 src/core/instance/lifecycle.js中。

  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    if (!prevVnode) {
      // 第一个参数为真实的node节点，则为初始化
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // 如果需要diff的prevVnode存在，那么对prevVnode和vnode进行diff
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }

在这个方法当中最为关键的就是 vm.__patch__ 方法，这也是整个 virtual-dom 当中最为核心的方法，主要完成了prevVnode 和 vnode 的 diff 过程并根据需要操作的 vdom 节点打 patch，最后生成新的真实 dom 节点并完成视图的更新工作。

接下来，让我们看下 vm.__patch__ 的逻辑过程， vm.__patch__ 方法定义在 src/core/vdom/patch.js 中。

function patch (oldVnode, vnode, hydrating, removeOnly) {
    ......
    if (isUndef(oldVnode)) {
      // 当oldVnode不存在时，创建新的节点
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 对oldVnode和vnode进行diff，并对oldVnode打patch  
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } 
	......
  }
}

在 patch 方法中，我们看到会分为两种情况，一种是当 oldVnode 不存在时，会创建新的节点；另一种则是已经存在 oldVnode ，那么会对 oldVnode 和 vnode 进行 diff 及 patch 的过程。其中 patch 过程中会调用 sameVnode 方法来对对传入的2个 vnode 进行基本属性的比较，只有当基本属性相同的情况下才认为这个2个vnode 只是局部发生了更新，然后才会对这2个 vnode 进行 diff，如果2个 vnode 的基本属性存在不一致的情况，那么就会直接跳过 diff 的过程，进而依据 vnode 新建一个真实的 dom，同时删除老的 dom 节点。

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
}

diff 过程中主要是通过调用 patchVnode 方法进行的:

  function patchVnode (oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
    ...... 
    const elm = vnode.elm = oldVnode.elm
    const oldCh = oldVnode.children
    const ch = vnode.children
    // 如果vnode没有文本节点
    if (isUndef(vnode.text)) {
      // 如果oldVnode的children属性存在且vnode的children属性也存在  
      if (isDef(oldCh) && isDef(ch)) {
        // updateChildren，对子节点进行diff  
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
        // 如果oldVnode的text存在，那么首先清空text的内容,然后将vnode的children添加进去  
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        // 删除elm下的oldchildren
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        // oldVnode有子节点，而vnode没有，那么就清空这个节点  
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      // 如果oldVnode和vnode文本属性不同，那么直接更新真是dom节点的文本元素
      nodeOps.setTextContent(elm, vnode.text)
    }
    ......
  }

从以上代码得知，

diff 过程中又分了好几种情况，oldCh 为 oldVnode的子节点，ch 为 Vnode 的子节点：

• 首先进行文本节点的判断，若 oldVnode.text !== vnode.text，那么就会直接进行文本节点的替换；
• 在vnode 没有文本节点的情况下，进入子节点的 diff；
• 当 oldCh 和 ch 都存在且不相同的情况下，调用 updateChildren 对子节点进行 diff；
• 若 oldCh 不存在，ch 存在，首先清空 oldVnode 的文本节点，同时调用 addVnodes 方法将 ch 添加到elm 真实 dom 节点当中；
• 若 oldCh 存在，ch 不存在，则删除 elm 真实节点下的 oldCh 子节点；
• 若 oldVnode 有文本节点，而 vnode 没有，那么就清空这个文本节点。

3.2.2、子节点 diff 流程分析

（1）Vue.js 源码

​ 这里着重分析下 updateChildren方法，它也是整个 diff 过程中最重要的环节，以下为 Vue.js 的源码过程，为了更形象理解 diff 过程，我们给出相关的示意图来讲解。

  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 为oldCh和newCh分别建立索引，为之后遍历的依据
    let oldStartIdx = 0
    let newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

    // 直到oldCh或者newCh被遍历完后跳出循环
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }

在开始遍历 diff 前，首先给 oldCh 和 newCh 分别分配一个 startIndex 和 endIndex 来作为遍历的索引，当oldCh 或者 newCh 遍历完后(遍历完的条件就是 oldCh 或者 newCh 的 startIndex >= endIndex )，就停止oldCh 和 newCh 的 diff 过程。接下来通过实例来看下整个 diff 的过程(节点属性中不带 key 的情况)。

（2）无 key 的 diff 过程

我们通过以下示意图对以上代码过程进行讲解：

（2.1）首先从第一个节点开始比较，不管是 oldCh 还是 newCh 的起始或者终止节点都不存在 sameVnode ，同时节点属性中是不带 key 标记的，因此第一轮的 diff 完后，newCh 的 startVnode 被添加到 oldStartVnode的前面，同时 newStartIndex 前移一位；

（2.2）第二轮的 diff 中，满足 sameVnode(oldStartVnode, newStartVnode)，因此对这2个 vnode 进行diff，最后将 patch 打到 oldStartVnode 上，同时 oldStartVnode 和 newStartIndex 都向前移动一位 ；

（2.3）第三轮的 diff 中，满足 sameVnode(oldEndVnode, newStartVnode)，那么首先对 oldEndVnode和newStartVnode 进行 diff，并对 oldEndVnode 进行 patch，并完成 oldEndVnode 移位的操作，最后newStartIndex 前移一位，oldStartVnode 后移一位；

（2.4）第四轮的 diff 中，过程同步骤3；

（2.5）第五轮的 diff 中，同过程1；

（2.6）遍历的过程结束后，newStartIdx > newEndIdx，说明此时 oldCh 存在多余的节点，那么最后就需要将这些多余的节点删除。

（3）有 key 的 diff 流程

在 vnode 不带 key 的情况下，每一轮的 diff 过程当中都是起始和结束节点进行比较，直到 oldCh 或者newCh 被遍历完。而当为 vnode 引入 key 属性后，在每一轮的 diff 过程中，当起始和结束节点都没有找到sameVnode 时，然后再判断在 newStartVnode 的属性中是否有 key，且是否在 oldKeyToIndx 中找到对应的节点 ：

• 如果不存在这个 key，那么就将这个 newStartVnode 作为新的节点创建且插入到原有的 root 的子节点中；
• 如果存在这个 key，那么就取出 oldCh 中的存在这个 key 的 vnode，然后再进行 diff 的过；

通过以上分析，给vdom上添加 key 属性后，遍历 diff 的过程中，当起始点，结束点的搜寻及 diff 出现还是无法匹配的情况下时，就会用 key 来作为唯一标识，来进行 diff，这样就可以提高 diff 效率。

带有 Key 属性的 vnode的 diff 过程可见下图：

（3.1）首先从第一个节点开始比较，不管是 oldCh 还是 newCh 的起始或者终止节点都不存在 sameVnode，但节点属性中是带 key 标记的， 然后在 oldKeyToIndx 中找到对应的节点，这样第一轮 diff 过后 oldCh 上的B节点被删除了，但是 newCh 上的B节点上 elm 属性保持对 oldCh 上 B节点 的elm引用。

（3.2）第二轮的 diff 中，满足 sameVnode(oldStartVnode, newStartVnode)，因此对这2个 vnode 进行diff，最后将 patch 打到 oldStartVnode上，同时 oldStartVnode 和 newStartIndex 都向前移动一位 ；

（3.3）第三轮的 diff 中，满足 sameVnode(oldEndVnode, newStartVnode)，那么首先对 oldEndVnode 和newStartVnode 进行 diff，并对 oldEndVnode 进行 patch，并完成 oldEndVnode 移位的操作，最后newStartIndex 前移一位，oldStartVnode 后移一位；

（3.4）第四轮的diff中，过程同步骤2；

（3.5）第五轮的diff中，因为此时 oldStartIndex 已经大于 oldEndIndex，所以将剩余的 Vnode 队列插入队列最后。

3.3、patch 过程

通过3.2章节介绍的 diff 过程中，我们会看到 nodeOps 相关的方法对真实 DOM 结构进行操作，nodeOps 定义在 src/platforms/web/runtime/node-ops.js 中，其为基本 DOM 操作，这里就不在详细介绍。

export function createElementNS (namespace: string, tagName: string): Element {
  return document.createElementNS(namespaceMap[namespace], tagName)
}

export function createTextNode (text: string): Text {
  return document.createTextNode(text)
}

export function createComment (text: string): Comment {
  return document.createComment(text)
}

export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}

export function removeChild (node: Node, child: Node) {
  node.removeChild(child)
}

3.4、总结

通过前三小节简析，我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了，我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。

四、总结

本文从通过介绍真实 DOM 结构其解析过程以及存在的问题，从而引出为什么需要虚拟 DOM；然后分析虚拟DOM 的好处，以及其一些理论基础和基础算法的实现；最后根据我们已经掌握的基础知识，再一步步去查看Vue.js 的源码如何实现的。从存在问题 —> 理论基础 —> 具体实践，一步步深入，帮助大家更好的了解什么是Virtual DOM、为什么需要 Virtual DOM、以及 Virtual DOM的具体实现，希望本文对您有帮助。

辛苦编写良久，如果对你有帮助，还望手动点赞鼓励~~~~~~

github地址为：github.com/fengshi123/…，上面汇总了作者所有的博客文章，如果喜欢或者有所启发，请帮忙给个 star ~，对作者也是一种鼓励。

参考文献

1、Vue 技术揭秘：https://ustbhuangyi.github.io/vue-analysis/

2、深度剖析：如何实现一个 Virtual DOM 算法：https://segmentfault.com/a/1190000004029168

3、vue核心之虚拟DOM(vdom)：https://www.jianshu.com/p/af0b398602bc

4、virtual-dom(Vue实现)简析：https://segmentfault.com/a/1190000010090659

一、介绍

Node 在 v0.8 时直接引入了 cluster 模块，用以解决多核 CPU 的利用率问题，同时也提供了较完善的 API，用以处理进程的健壮性问题。
cluster 模块调用 fork 方法来创建子进程，该方法与 child_process 中的 fork 是同一个方法（玩转 node 子进程 — child_process）。 cluster 模块采用的是经典的主从模型，cluster 会创建一个 master，然后根据你指定的数量复制出多个子进程，可以使用cluster.isMaster 属性判断当前进程是 master 还是 worker (工作进程)。由 master 进程来管理所有的子进程，主进程不负责具体的任务处理，主要工作是负责调度和管理。
cluster 模块使用内置的负载均衡来更好地处理线程之间的压力，该负载均衡使用了 Round-robin 算法（也被称之为循环算法）。当使用 Round-robin 调度策略时，master accepts() 所有传入的连接请求，然后将相应的TCP请求处理发送给选中的工作进程（该方式仍然通过 IPC 来进行通信）。
官方使用实例如下所示

const cluster = require('cluster');
const cpuNums = require('os').cpus().length;
const http = require('http');

if (cluster.isMaster) {
  for (let i = 0; i < cpuNums; i++){
    cluster.fork();
  }
  // 子进程退出监听
  cluster.on('exit', (worker,code,signal) => {
    console.log('worker process died,id',worker.process.pid)
  })
} else {
  // 给子进程标注进程名
  process.title = `cluster 子进程 ${process.pid}`;
  // Worker可以共享同一个 TCP 连接，这里是一个 http 服务器
  http.createServer((req, res)=> {
    res.end(`response from worker ${process.pid}`);
  }).listen(3000);
  console.log(`Worker ${process.pid} started`);
}

其实，cluster 模块由 child_process 和 net 模块的组合应用，cluster 启动时，会在内部启动 TCP 服务器，在 cluster.fork() 子进程时，将这个 TCP 服务器端 socket 的文件描述符发送给工作进程。如果工作进程是通过 cluster.fork() 复制出来的，那么它的环境变量里就存在 NODE_UNIQUE_ID，如果工作进程中存在 listen() 侦听网络端口的调用，它将拿到文件描述符，通过 SO_REUSEADDR 端口重用，从而实现多个子进程共享端口。

二、cluster 事件

（1）fork：复制一个工作进程后触发该事件；
（2）online：复制好一个工作进程后，工作进程主动发送一条 online 消息给主进程，主进程收到消息后，触发该事件；
（3）listening：工作进程中调用 listen() （共享了服务器端 Socket）后，发送一条 listening 消息给主进程，主进程收到消息后，触发该事件；
（4）disconnect：主进程和工作进程之间 IPC 通道断开后会触发该事件；
（5）exit：有工作进程退出时会触发该事件；
（6）setup：cluster.setupMaster() 执行完后触发该事件；
这些事件大多跟 child_process 模块的事件相关，在进程间消息传递的基础上完成的封装。

cluster.on('fork', ()=> {
  console.log('fork 事件... ');
})

cluster.on('online', ()=> {
  console.log('online 事件... ');
})

cluster.on('listening', ()=> {
  console.log('listening 事件... ');
})

cluster.on('disconnect', ()=> {
  console.log('disconnect 事件... ');
})

cluster.on('exit', ()=> {
  console.log('exit 事件... ');
})

cluster.on('setup', ()=> {
  console.log('setup 事件... ');
})

三、master 与 worker 通信

由以上可知，master 进程通过 cluster.fork() 来创建 worker 进程，其实，cluster.fork() 内部是通过 child_process.fork() 来创建子进程。也就是说：master 与 worker 进程是父、子进程的关系；其跟 child_process 创建的父子进程一样是通过 IPC 通道进行通信的。
IPC 的全称是 Inter-Process Communication，即进程间通信，进程间通信的目的是为了让不同的进程能够互相访问资源并进行协调工作。Node 中实现 IPC 通道的是管道（pipe）技术，具体实现由 libuv 提供，在 Windows 下由命名管道（named pipe）实现，*nix 系统则采用 Unix Domain Socket 实现。其变现在应用层上的进程间通信只有简单的 message 事件和 send 方法，使用十分简单。

父进程在实际创建子进程之前，会创建 IPC 通道并监听它，然后才真正创建出子进程，并通过环境变量（NODE_CHANNEL_FD）告诉子进程这个 IPC 通道的文件描述符。子进程在启动过程中，根据文件描述符去连接这个已存在的 IPC 通道，从而完成父子进程之间的连接。

建立连接之后的父子进程就可以进行自由通信了。由于 IPC 通道是用命名管道或 Domain Socket 创建的，它们与网络 socket 的行为比较类似，属于双向通信。不同的是它们在系统内核中就完成了进程间的通信，而不用经过实际的网络层，非常高效。在 Node 中，IPC 通道被抽象为 Stream 对象，在调用 send 时发送数据（类似于 write ），接收到的消息会通过 message 事件（类似于 data）触发给应用层。
​

master 和 worker 进程在 server 实例的创建过程中，是通过 IPC 通道进行通信的，那会不会对我们的开发造成干扰呢？比如，收到一堆其实并不需要关心的消息？答案肯定是不会？那么是怎么做到的呢？
​

Node 引入进程间发送句柄的功能，send 方法除了能通过 IPC 发送数据外，还能发送句柄，第二个参数为句柄，如下所示

child.send(meeage, [sendHandle])

句柄是一种可以用来标识资源的引用，它的内部包含了指向对象的文件描述符。例如句柄可以用来标识一个服务器端 socket 对象、一个客户端 socket 对象、一个 UDP 套接字、一个管道等。
那么句柄发送跟我们直接将服务器对象发送给子进程有没有什么差别？它是否真的将服务器对象发送给子进程？
其实 send() 方法在将消息发送到 IPC 管道前，将消息组装成两个对象，一个参数是 handle，另一个是 message，message 参数如下所示

{
  cmd: 'NODE_HANDLE',
  type: 'net.Server',
  msg: message
}

发送到 IPC 管道中的实际上是要发送的句柄文件描述符，其为一个整数值。这个 message 对象在写入到 IPC 管道时会通过 JSON.stringify 进行序列化，转化为字符串。子进程通过连接 IPC 通道读取父进程发送来的消息，将字符串通过 JSON.parse 解析还原为对象后，才触发 message 事件将消息体传递给应用层使用。在这个过程中，消息对象还要被进行过滤处理，message.cmd 的值如果以 NODE_ 为前缀，它将响应一个内部事件 internalMessage ，如果 message.cmd 值为 NODE_HANDLE，它将取出 message.type 值和得到的文件描述符一起还原出一个对应的对象。这个过程的示意图如下所示

在 cluster 中，以 worker 进程通知 master 进程创建 server 实例为例子。worker 伪代码如下：

// woker进程
const message = {
  cmd: 'NODE_CLUSTER',
  type: 'net.Server',
  msg: message
};
process.send(message);

master 伪代码如下：

worker.process.on('internalMessage', fn);

四、如何实现端口共享

在前面的例子中，多个 woker 中创建的 server 监听了同个端口 3000，通常来说，多个进程监听同个端口，系统会报 EADDRINUSE 异常。为什么 cluster 没问题呢？
因为独立启动的进程中，TCP 服务器端 socket 套接字的文件描述符并不相同，导致监听到相同的端口时会抛出异常。但对于 send() 发送的句柄还原出来的服务而言，它们的文件描述符是相同的，所以监听相同端口不会引起异常。
这里需要注意的是，多个应用监听相同端口时，文件描述符同一时间只能被某个进程所用，换言之就是网络请求向服务器端发送时，只有一个幸运的进程能够抢到连接，也就是说只有它能为这个请求进行服务，这些进程服务是抢占式的。

五、如何将请求分发到多个worker

（1）每当 worker 进程创建 server 实例来监听请求，都会通过 IPC 通道，在 master 上进行注册。当客户端请求到达，master 会负责将请求转发给对应的 worker；
（2）具体转发给哪个 worker？这是由转发策略决定的，可以通过环境变量 NODE_CLUSTER_SCHED_POLICY 设置，也可以在 cluster.setupMaster(options) 时传入，默认的转发策略是轮询（SCHED_RR）；
（3）当有客户请求到达，master 会轮询一遍 worker 列表，找到第一个空闲的 worker，然后将该请求转发给该worker；

六、pm2 工作原理

pm2 是 node 进程管理工具，可以利用它来简化很多 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，如果在实践中没有使用过 pm2 的同学可以查看笔者的另一篇文章《pm2 实践指南》
pm2 自身是基于 cluster 模块进行封装的， 本节我们主要 pm2 的 Satan 进程、God Daemon 守护进程 以及两者之间的进程间远程调用 RPC。

撒旦（Satan），主要指《圣经》中的堕天使（也称堕天使撒旦），被看作与上帝的力量相对的邪恶、黑暗之源，是God 的对立面。

其中 Satan.js 提供程序的退出、杀死等方法，God.js 负责维持进程的正常运行，God 进程启动后一直运行，相当于 cluster 中的 Master进程，维持 worker 进程的正常运行。
RPC（Remote Procedure Call Protocol）是指远程过程调用，也就是说两台服务器A，B，一个应用部署在A 服务器上，想要调用 B 服务器上应用提供的函数/方法，由于不在一个内存空间，不能直接调用，需要通过网络来表达调用的语义和传达调用的数据。同一机器不同进程间的方法调用也属于 rpc 的作用范畴。
执行流程如下所示

每次命令行的输入都会执行一次 satan 程序，如果 God 进程不在运行，首先需要启动 God 进程。然后根据指令，Satan 通过 rpc 调用 God 中对应的方法执行相应的逻辑。
以 pm2 start app.js -i 4 为例，God 在初次执行时会配置 cluster，同时监听 cluster 中的事件：

// 配置cluster
cluster.setupMaster({
  exec : path.resolve(path.dirname(module.filename), 'ProcessContainer.js')
});

// 监听cluster事件
(function initEngine() {
  cluster.on('online', function(clu) {
    // worker进程在执行
    God.clusters_db[clu.pm_id].status = 'online';
  });
  
  // 命令行中 kill pid 会触发exit事件，process.kill不会触发exit
  cluster.on('exit', function(clu, code, signal) {
    // 重启进程 如果重启次数过于频繁直接标注为stopped
    God.clusters_db[clu.pm_id].status = 'starting';
    // 逻辑
    // ...
  });
})();

​
在 God 启动后， 会建立 Satan 和 God 的rpc链接，然后调用 prepare 方法，prepare 方法会调用 cluster.fork 来完成集群的启动

God.prepare = function(opts, cb) {
  // ...
  return execute(opts, cb);
};

function execute(env, cb) {
  // ...
  var clu = cluster.fork(env);
  // ...
  God.clusters_db[id] = clu;
  
  clu.once('online', function() {
    God.clusters_db[id].status = 'online';
    if (cb) return cb(null, clu);
    return true;
  });
  return clu;
}

七、总结

本文从 cluster 的基本使用、事件，到 cluster 的基本实现原理，再到 pm2 如何基于 cluster 进行进程管理，带你从入门到深入原理以及了解其高阶应用，希望对你有帮助。

博客 github地址为：github.com/fengshi123/blog ，汇总了作者的所有博客，也欢迎关注及 star ~

参考文献：
1、深入理解Node.js 中的进程与线程
2、Node.js进阶：cluster模块深入剖析
3、node 中文网
4、深入浅出 nodejs

前言

​ 前端团队有评审代码的要求，但由于每个开发人员的水平不同，技术关注点不同，所以对代码评审的关注点不同，为了保证代码质量，团队代码风格统一，特此拟定一份《前端团队代码评审 CheckList 清单》，这样代码评审人员在评审代码时，可以参照这份清单，对代码进行评审。从而辅助整个团队提高代码质量、统一代码规范。如果你的团队还没有这么一份代码评审 CheckList 清单，也许这正是你需要的；如果你的团队已经有了代码评审参照标准，这份清单也许能起到锦上添花的效果。

辛苦整理良久，如果喜欢或者有所启发，请帮忙给个 Star ~，对作者也是一种鼓励。

一、代码静态检查工具

1.1、使用 eslint 工具对 javascript 代码进行检查

​ eslint 检查的规范继承自 eslint-config-standard 检验规则，具体的规则介绍参照链接：https://cn.eslint.org/docs/rules/ ，这里及以下部分不再重复介绍这些检验规则。

1.2、使用 stylelint 工具对 css 样式代码进行检查

​ stylelint 检查的规范继承自 stylelint-config-standard 检验规则，具体的规则介绍参照链接：https://www.npmjs.com/package/stylelint-config-standard ，这里及以下部分不再重复介绍这些检验规则。

二、命名

2.1、JS 采用 Camel Case 小驼峰式命名

推荐：

   studentInfot

2.2、避免名称冗余

推荐：

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

不推荐：

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

2.3、CSS 类名采用 BEM 命名规范

推荐：

.block__element{} 
.block--modifier{}

2.4、命名符合语义化

命名需要符合语义化，如果函数命名，可以采用加上动词前缀：

推荐：

//是否可阅读 
function canRead(){ 
   return true; 
} 
//获取姓名 
function getName{
   return this.name 
} 

三、JS 推荐写法

3.1、每个常量都需命名

每个常量应该命名，不然看代码的人不知道这个常量表示什么意思。

推荐：

const COL_NUM = 10;
let row = Math.ceil(num/COL_NUM);

不推荐：

let row = Math.ceil(num/10);

3.2、推荐使用字面量

创建对象和数组推荐使用字面量，因为这不仅是性能最优也有助于节省代码量。

推荐：

let obj = {   
     name:'tom',     
     age:15,     
     sex:'男' 
} 

不推荐：

let obj = {};
obj.name = 'tom';
obj.age = 15;
obj.sex = '男';

3.3、对象设置默认属性的推荐写法

推荐：

const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};

function createMenu(config) {
  config = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );

  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);

不推荐：

const menuConfig = {
  title: null,
  body: "Bar",
  buttonText: null,
  cancellable: true
};

function createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "Bar";
  config.buttonText = config.buttonText || "Baz";
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

3.4、将对象的属性值保存为局部变量

对象成员嵌套越深，读取速度也就越慢。所以好的经验法则是：如果在函数中需要多次读取一个对象属性，最佳做法是将该属性值保存在局部变量中，避免多次查找带来的性能开销。

推荐：

let person = {
    info:{
        sex:'男'
    }
}
function  getMaleSex(){
    let sex = person.info.sex;
    if(sex === '男'){
        console.log(sex)
    }
} 

不推荐：

let person = {
    info:{
        sex:'男'
    }
}
function  getMaleSex(){
    if(person.info.sex === '男'){
        console.log(person.info.sex)
    }
} 

3.5、字符串转为整型

当需要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()，而不是使用parseInt()将字符串转换成数字。Math是内部对象，所以Math.floor()`其实并没有多少查询方法和调用时间，速度是最快的。

推荐：

let num = Math.floor('1.6');

不推荐：

let num = parseInt('1.6');

3.6、函数参数

函数参数越少越好，如果参数超过两个，要使用 ES6的解构语法，不用考虑参数的顺序。

推荐：

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: 'Foo',
  body: 'Bar',
  buttonText: 'Baz',
  cancellable: true
});

不推荐：

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

3.7、使用参数默认值

使用参数默认值 替代 使用条件语句进行赋值。

推荐：

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

不推荐：

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}

3.8、最小函数准则

这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用 。

3.9、不要写全局方法

在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。

推荐:

class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));        
  }
}

不推荐：

Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

3.10、推荐函数式编程

函数式变编程可以让代码的逻辑更清晰更优雅，方便测试。

推荐：

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];
let totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)

不推荐：

 const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

3.11、使用多态替换条件语句

为了让代码更简洁易读，如果你的函数中出现了条件判断，那么说明你的函数不止干了一件事情，违反了函数单一原则 ；并且绝大数场景可以使用多态替代

推荐：

class Airplane {
  // ...
}
// 波音777
class Boeing777 extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getPassengerCount();
  }
}
// 空军一号
class AirForceOne extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude();
  }
}
// 赛纳斯飞机
class Cessna extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getFuelExpenditure();
  }
}

不推荐：

class Airplane {
  // ...

  // 获取巡航高度
  getCruisingAltitude() {
    switch (this.type) {
      case '777':
        return this.getMaxAltitude() - this.getPassengerCount();
      case 'Air Force One':
        return this.getMaxAltitude();
      case 'Cessna':
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

3.12、定时器是否清除

代码中使用了定时器 setTimeout 和 setInterval，需要在不使用时进行清除。

四、SCSS 推荐写法

4.1、变量 $ 使用

利用scss中的变量配置，可以进行项目的颜色、字体大小统一更改（换肤），有利于后期项目的维护。

推荐：

$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

4.2、@import 导入样式文件

scss中的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求，在构建我们自己的组件库时推荐使用。

@import "./base.scss";
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
@import "./dropdown.scss";
@import "./dropdown-menu.scss";

4.3、局部文件命名的使用

scss局部文件的文件名以下划线开头。这样，scss就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

推荐：

4.4、父选择器标识符 & 实现BEM 命令规范

scss的嵌套和父选择器标识符&能解决BEM命名的冗长，且使样式可读性更高。

推荐：

.el-input {
  display: block;
  &__inner {
     text-align: center;
  }
 }

4.5、@mixin 混合器的使用

mixin混合器用来实现大段样式的重用，减少代码的冗余，且支持传参。

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}

  @include m(medium) {
    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);   
  }

  @include m(small) {
    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
  }

4.6、@extend 指令的使用

（1）使用@extend产生 DRY CSS风格的代码（Don't repeat yourself）

（2）@mixin主要的优势就是它能够接受参数。如果想传递参数，你会很自然地选择@mixin而不是@extend

推荐：

.common-mod {
  height: 250px;
  width: 50%;
  background-color: #fff;
  text-align: center;
}

 .show-mod--right {
   @extend .common-mod;
   float: right;
 }

.show-mod--left {
   @extend .common-mod;
}

4.7、#{} 插值的使用

插值能动态定义类名的名称，当有两个页面的样式类似时，我们会将类似的样式抽取成页面混合器，但两个不同的页面样式的命名名称根据BEM命名规范不能一样，这时我们可使用插值进行动态命名。

推荐：

@mixin home-content($class) {
  .#{$class} {
    position: relative;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: hidden;

    &--left {
      margin-left: 160px;
    }

    &--noleft {
      margin-left: 0;
    }
  }
}

4.8、each遍历、map数据类型、@mixin/@include混合器、#{}插值 结合使用

可通过each遍历、map数据类型、@mixin/@include混合器、#{}插值 结合使用，从而减少冗余代码，使代码更精简。

推荐：

$img-list: (
   (xlsimg, $papers-excel),
   (xlsximg, $papers-excel),
   (gifimg, $papers-gif),
   (jpgimg, $papers-jpg),
   (mp3img, $papers-mp3),
   (mp4img, $papers-mp3),
   (docimg, $papers-word),
   (docximg, $papers-word),
   (rarimg, $papers-zip),
   (zipimg, $papers-zip),
   (unknownimg, $papers-unknown)
);

@each $label, $value in $img-list {
  .com-hwicon__#{$label} {
    @include commonImg($value);
  }
}

4.9、scss 自带函数的应用

scss自带函数的应用，从而进行相关的计算，例如 mix函数的使用如下。

 @include m(text) {
    &:hover,
    &:focus {
      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
      border-color: transparent;
      background-color: transparent;
    }

    &:active {
      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      border-color: transparent;
      background-color: transparent;
    }
}

4.10、gulp-sass的使用

gulp-sass插件能实时监测scss代码检查其语法错误并将其编译成css代码，帮助开发人员检查scss语法的准确性，且其是否符合我们的预期，相关配置如下：

gulp.task('gulpsass', function() {
  return gulp.src('src/style/components/hwIcon.scss')
    .pipe(gulpsass().on('error', gulpsass.logError))
    .pipe(gulp.dest('src/style/dest'));
});

gulp.task('watch', function() {
  gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);
});

五、Vue 推荐写法

5.1、组件名为多个单词

我们开发过程中自定义的组件的名称需要为多个单词，这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

推荐：

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

不推荐：

Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

5.2、组件的 data 必须是一个函数

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话，子组件之间的属性值会互相影响。

推荐：

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

不推荐：

export default {
  data: {
    foo: 'bar'
  }
}

5.3、Prop定义应该尽量详细

prop 的定义应该尽量详细，至少需要指定其类型。

推荐：

props: {
  status: String
}

// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

不推荐：

props: ['status'] 

5.4、为 v-for 设置键值

v-for 中总是有设置 key 值。在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。

推荐：

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

不推荐：

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

5.5、完整单词的组件名

组件名应该倾向于完整单词而不是缩写，编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。

推荐：

components/ 
|- StudentDashboardSettings.vue 
|- UserProfileOptions.vue 

不推荐：

components/ 
|- SdSettings.vue 
|- UProfOpts.vue 

5.6、多个特性元素的每个特性分行

在 JavaScript 中，用多行分隔对象的多个属性是很常见的最佳实践，因为这样更易读。

推荐：

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

不推荐：

<MyComponent foo="a" bar="b" baz="c"/> 

5.7、模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

推荐：

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

不推荐：

{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

5.8、简单的计算属性

应该把复杂计算属性分割为尽可能多的更简单的属性。

推荐：

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

不推荐：

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

5.9、指令缩写

指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)。

推荐：

<input
  @input="onInput"
  @focus="onFocus"
>

不推荐：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

5.10、标签顺序保持一致

单文件组件应该总是让标签顺序保持为 、<script>、 <style> 。

推荐：

<!-- ComponentA.vue -->

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

不推荐：

<!-- ComponentA.vue -->

<template>...</template>
<style>/* ... */</style>
<script>/* ... */</script>

5.11、组件之间通信

父子组件的通信推荐使用 prop和 emit ，而不是this.$parent或改变 prop；

兄弟组件之间的通信推荐使用 EventBus（$emit　/ $on），而不是滥用 vuex；

祖孙组件之间的通信推荐使用 $attrs / $listeners 或 provide / inject（依赖注入） ，而不是滥用 vuex；

5.12、页面跳转数据传递

页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

推荐：

let id = ' 123';
this.$router.push({name: 'homeworkinfo', query: {id:id}}); 

5.13、script 标签内部声明顺序

script 标签内部的声明顺序如下：

data > prop > components > filter > computed > watch > 钩子函数（钩子函数按其执行顺序） > methods

5.14、计算属性 VS 方法 VS 侦听器

• （1）推荐使用计算属性：计算属性基于响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值；相比之下，每次调用方法都会再次执行方法；
• （2）推荐使用计算属性：而不是根据 Watch 侦听属性，进行回调； 但是有计算属性做不到的：当需要在数据变化时执行异步或开销较大的操作时，侦听器是最有用的。

5.15、v-if VS v-show

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的属性 display 进行切换。

推荐：

如果运行时，需要非常频繁地切换，推荐使用 v-show 比较好；如果在运行时，条件很少改变，则推荐使用 v-if 比较好。

六、团队其它规范

6.1、尽量不手动操作 DOM

因为团队现在使用 vue 框架，所以在项目开发中尽量使用 vue 的特性去满足我们的需求，尽量（不到万不得已）不要手动操作DOM，包括：增删改dom元素、以及更改样式、添加事件等。

6.2、删除弃用代码

很多时候有些代码已经没有用了，但是没有及时去删除，这样导致代码里面包括很多注释的代码块，好的习惯是提交代码前记得删除已经确认弃用的代码，例如：一些调试的console语句、无用的弃用代码。

6.3、保持必要的注释

代码注释不是越多越好，保持必要的业务逻辑注释，至于函数的用途、代码逻辑等，要通过语义化的命令、简单明了的代码逻辑，来让阅读代码的人快速看懂。

辛苦整理良久，如果喜欢或者有所启发，请帮忙给个 Star ~，对作者也是一种鼓励。

前言

通过上一篇文章《一文归纳 React Hooks 常用场景》，我们根据使用场景分别进行举例说明，帮助你认识理解并可以熟练运用 React Hooks 大部分特性了。本文则对 hooks 进一步加深，让我们通过自定义一些 hooks，解决我们在平时项目中非常常用的需求场景，做到代码高复用低耦合，从而加深对 hooks 的理解和运用。

辛苦整理良久，还望手动点赞鼓励~
博客 github地址为：github.com/fengshi123/… ，汇总了作者的所有博客，欢迎关注及 star ~

1、实现自定义的 useMount

首先我们自定义一个 useMount hook，其功能为在 Dom 渲染之后执行相关函数，即类似于 class 组件写法中的 componentDidMount 生命周期钩子的功能。
我么基于以下原理实现：如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。如果在函数组件中实现该功能，即代码如下所示

useEffect(() => {
  console.log('mount');
}, []);

现在我们将这个功能进行抽取，封装成为 useMount hook，则可以如下实现，其中该钩子支持传入一个回调执行函数 fn 作为参数。

import { useEffect } from 'react';

const useMount = (fn: () => void) => {
  useEffect(() => {
    fn();
  }, []);
};

export default useMount;

现在我们就可以在相关业务场景中使用这个 useMount hook 了，如下所示，只会在 MyPage 初次渲染时执行一次 fun，即使我们多次点击 button，使 count 不断增加，页面不断更新，也不会再执行 fun。

import React, { useCallback, useState } from 'react';
import useMount from './useMount';

const MyPage = () => {
  const [count, setCount] = useState(0);
  const fun = useCallback(() => {
    console.log('mount');
  }, []);

  useMount(fun);

  return (
    <div >
      <button type="button" onClick={() => { setCount(count + 1); }}>
        增加 {count}
      </button>
    </div>
  );
};

export default MyPage;

2、实现自定义的 useUnmount

本节我们自定义一个 useUnmount hook，其功能为在 Dom 卸载之前执行相关函数，即类似于 class 组件写法中的 componentWillUnmount 生命周期钩子的功能。
我么基于以下原理实现：如果 effect 有返回一个函数，React 将会在执行清除操作时调用它。如果在函数组件中实现该功能，即代码如下所示

useEffect(() => () => {
  console.log('unmount');
});

现在我们将这个功能进行抽取，封装成为 useUnmount hook，则可以如下实现，其中该钩子支持传入一个回调执行函数 fn 作为参数。

import { useEffect } from 'react';

const useUnmount = (fn: () => void) => {
  useEffect(() => {
    fn();
  }, []);
};

export default useUnmount;

现在我们就可以在相关业务场景中使用这个 useUnmount hook 了，如下所示，只会在 MyComponet 卸载时执行一次 fun。

import React, { useCallback, useState } from 'react';
import useUnmount from './useUnmount';

const MyComponent = () => {
  const fun = useCallback(() => {
    console.log('unmount');
  }, []);

  useUnmount(fun);

  return <div>Hello World</div>;
};


const MyPage = () => {
  const [state, setState] = useState(true);

  return (
    <div >
      {state && <MyComponent />}
      <button type="button" onClick={() => { setState(!state); }}>
        切换
      </button>
    </div>
  );
};

export default MyPage;

3、实现自定义的 useUpdate

我们都知道如果想让 function 组件重新渲染，我们不得不更新 state，但是有时候业务需要的 state 是没必要更新的，我们不能仅仅为了让组件会重新渲染而强制让一个 state 做无意义的更新，所以这个时候我们就可以自定义一个更新的 hook 来优雅的实现组件的强制更新，类似于 class 组件的 forceUpdate 的功能，实现代码如下

import { useCallback, useState } from 'react';

const useUpdate = () => {
  const [, setState] = useState({});

  return useCallback(() => setState({}), []);
};

export default useUpdate;

useUpdate 的使用实例如下所示，点击按钮时，调用 update，会看到 Time 的值在变化，说明组件已经强制更新了。

import React from 'react';
import useUpdate from './useUpdate';

const MyPage = () => {
  const update = useUpdate();

  return (
    <div >
      <button type="button" onClick={update}>
      Time: {Date.now()}
      </button>
    </div>
  );
};

export default MyPage;

4、实现自定义的 usePrevious

平时在实现需求时，经常需要保存上一次渲染时 state 的值，so 这个 hook 就是用来保存上一次渲染状态的。如下所示为实现逻辑，主要用到 useRef.current 来存放变量。

import { useRef } from 'react';

function usePrevious<T> (state: T): T|undefined {
  const prevRef = useRef<T>();
  const curRef = useRef<T>();

  prevRef.current = curRef.current;
  curRef.current = state;

  return prevRef.current;
}

export default usePrevious;

usePrevious 的使用实例如下所示，当点击按钮使 count 增加时，previous 会保留 count 的上一个值。

import React, { useState } from 'react';
import usePrevious from './usePrevious';

const MyPage = () => {
  const [count, setCount] = useState(0);
  const previous = usePrevious(count);

  return (
    <div >
      <div>新值:{count}</div>
      <div>旧值:{previous}</div>
      <button type="button" onClick={() => { setCount(count + 1); }}>
        增加
      </button>
    </div>
  );
};

export default MyPage;

5、实现自定义的 useTimeout

在 hook 中，我们使用 setTimeout 之后，需要在 dom 卸载时，手动进行 clearTimeout 将定时器移除，否则可能造成内存泄漏。假设我们在项目中多次用到，那我们则需要多次重复写移除代码，并且有时候可能由于疏忽，将其遗忘。so，为什么不能将它封装成 hook，在需要的时候调用即可。

import { useEffect } from 'react';

function useTimeout (fn: () => void, delay: number) {
  useEffect(() => {
    const timer = setTimeout(() => {
      fn();
    }, delay);
    return () => {
      clearTimeout(timer); // 移除定时器
    };
  }, [delay]);
}

export default useTimeout;

如下所示，我们只需要告诉 useTimeout 多少毫秒去调用哪个方法，不需要再去考虑移除定时器的事情了。

import React, { useState } from 'react';
import useTimeout from './useTimeout';

const MyPage = () => {
  const [count, setCount] = useState(0);

  useTimeout(() => {
    setCount(count => count + 1);
  }, 3000);

  return (
    <div >
      <button type="button">
        增加 {count}
      </button>
    </div>
  );
};

export default MyPage;

6、实现自定义的 useInterval

useInterval 封装 setInterval 功能，其原因和用法跟 useTimeout 一样，这里不再赘述。

import { useEffect } from 'react';

function useInterval (fn: () => void, delay: number) {
  useEffect(() => {
    const timer = setInterval(() => {
      fn();
    }, delay);
    return () => {
      clearInterval(timer); // 移除定时器
    };
  }, [delay]);
}

export default useInterval;

7、实现自定义的 useDebounce

防抖在我们日常开发中是非常常见的，比如：按钮点击、文本编辑保存等，为防止用户过于频繁操作，需要进行防抖处理。**防抖的定义：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时间，才执行代码一次。**类比于生活中的场景就例如坐公交，在一定时间内，如果有乘客陆续刷卡上车，司机就不会开车，当乘客没有刷卡了，司机才开车。
防抖功能的基本实现和相关注释如下所示

function debounce(fn,wait){
    let timeout1;
    return function(){
        clearTimeout(timeout1);  // 重新清零
        let context = this;  // 保存上下文
        let args = arguments; // 获取传入的参数
        timeout1 = setTimeout(()=> {
            fn.apply(context, args);
        },wait)
    }
}

我们将以上的实现用 hooks 自定义的方式来写，useDebounce hook 相关代码如下，其中传入的两个参数为：fn（要执行的回调方法）和 delay（防抖时间），然后该 hook 返回一个执行方法

import { useCallback, useRef } from 'react';

const useDebounce = (fn: Function, delay = 100) => {
  const time1 = useRef<any>();

  return useCallback((...args) => {
    if (time1.current) {
      clearTimeout(time1.current);
    }
    time1.current = setTimeout(() => {
      fn(...args);
    }, delay);
  }, [delay]);
};

export default useDebounce;

现在我们就可以在相关业务场景中使用这个 useDebounce hook 了，如下所示，我们不断点击 button，count 也不会增加，只有点击间隔超过 3000ms，count 数才会增加。

import React, { useCallback, useState } from 'react';
import useDebounce from './useDebounce';

const MyPage = () => {
  const [count, setCount] = useState(0);
  const fun = useCallback(() => {
    setCount(count => count + 1);
  }, []);

  const run = useDebounce(fun, 3000);

  return (
    <div >
      <button type="button" onClick={() => { run(); }}>
        增加 {count}
      </button>
    </div>
  );
};

export default MyPage;