简单手写实现React的基本生命周期

前言

提到发版后如何自动清理缓存，大家都普遍都会想到配置nginx设置不缓存然后在配置打包生成hash值即可。但实际上据我本人亲测好像是没有用的（反正我试过不行T T），于是乎便产生了这篇文章。本文基于 vue 2.x 来进行配置。

思路

首先要知道怎么获取到最新版本，以及怎么判断客户端是旧版本。

服务端

我们知道，由 vue-cli 生成的项目中带有 public 文件夹，该文件夹下的文件不会被 webpack 处理，于是我们在该目录下新建一个 config.json 来存放我们的版本号：

这个 json 文件中大致是这个样：

{"version": ""
} 

有了这个文件后我们在vue.config.js里配置一些东西，我们在每次打包后都会生成一个版本号存到config.json中的version属性里。

版本号的命名大家可以自行定义，但要保证版本号的唯一性。这里我使用了git-revision-webpack-plugin这个插件，他可以获取到 git分支 + commit hash 等一些提交信息，利用这些信息我们组装成一个唯一的版本号：

// vue.config.js
const gitRevisionPlugin = new GitRevisionPlugin();
const VERSION = `${gitRevisionPlugin.branch()}_${gitRevisionPlugin.version()}_${gitRevisionPlugin.commithash()}_${Timestamp}`; 

组装完之后，我们写入config.json的version里（完整代码）：

// vue.config.js
const path = require("path");
const fs = require("fs");
const gitRevisionPlugin = new GitRevisionPlugin();
const VERSION = `${gitRevisionPlugin.branch()}_${gitRevisionPlugin.version()}_${gitRevisionPlugin.commithash()}_${Timestamp}`;
const configJSON = require(resolve("public/config.json"));
const configFile = path.resolve(__dirname, "public/config.json");
fs.writeFileSync(configFile,JSON.stringify({...configJSON,version: VERSION,},null,2)
); 

这样在每次发版时服务器上都会存有一个最新的版本号了，接下来我们看看客户端如何处理。

客户端

在客户端里，我们需要获取到服务器上的最新版本号以及客户端的版本号，我们新建一个文件systemUpdate.js用来实现我们判断版本号的方法，通过axios请求服务器上的config.json获取最新版本号。之后将版本号存在localStorage中，来更新版本号。等下次发版时再取出本地的版本号与服务器上的对比即可。

import axios from "axios";

const getConfig = () => {return new Promise((resolve) => {axios.get(`/config.json`, {params: {_t: new Date().getTime(),},}).then((res) => {resolve(res.data);});});
};

export async function isNewVersion() {const config = await getConfig();let newVersion = config.version;let oldVersion = localStorage.getItem('version');let isUpdated = oldVersion !== newVersion;console.log('新版本号：', newVersion);console.log('旧版本号：', oldVersion);if (isUpdated) {// 如果version不一致，则清除本地基础数据localStorage.clear();localStorage.setItem("version", newVersion );window.location.reload(true);// do something ...}return isUpdated;
} 

你可以在对比不一致后做你任何想做的事情。但一定要储存版本号以及刷新确保能获取到最新的资源。

判断时机

有了方法之后，接下来就是判断时机。这里我是在路由切换后进行新旧版本判断，我们来到定义vue-router的地方通过设置钩子守卫来判断新旧版本。

import { isNewVersion } from "@/utils/systemUpdate";

router.afterEach(async (to, from, next) => {if (to.meta.requireAuth) {// do something ...isNewVersion();}
}); 

接下来就是在本地跑起你的项目试验一下啦，当版本号不一致时会即刻刷新：

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享