在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难。我的项目也遇到了同样的问题，在 2019 年左右做了技术调研和选型，最终选择了 react-router-cache-route，并在此基础上实现了多页签的需求，并稳定运行了 2 年的时间。下面我来复盘一下这次的多页签改造。

一、项目简介

本项目是我现在所在部门的项目，是一个企业级中后台管理系统，包括系统管理、角色权限体系、基于 Activiti 的工作流引擎等很多开箱即用的功能。项目包括前后端，后端是我们部门自研的基于 Spring 的企业级 Java 框架，前端是 React 技术栈，当时还是 v15 版本。React Router 还是 v2 版本。

项目主要对象是提供给科技部门有中后台和流程需求的项目组，基于我们项目提供的基线工程，可以快速搭建工程，在此基础上根据需求进行开发。截止到 2019 年 10 月我离开该项目组，本项目已经服务了行内近 50 个系统。

前言

Vite 无疑是当前最火热的项目之一，随着春节后 2.0 版本的发布，越来越多开发者开始关注起了这个项目。这个号称下一代前端构建工具的给我们最大的印象的就是快。日常被缓慢的项目启动时间和 HMR 折磨，有了 Vite 之后，真的不要太爽。虽然 Vite 和框架无关，但应用较多的仍然是 Vue 工程，那么 React 工程是否能够顺利使用呢，这两周在工作之余，就开始了 Vite 2.0 + React 的尝试。当然其中踩了比较多的坑，比如 Antd 的引入带来的一系列问题，别名怎么写，代理如何配置，集成 ahooks 等等，希望能够帮助到使用 React 又想使用 Vite 提升开发效率的同学，少走弯路。当然，我们还可以从实践的过程中直观了解到 Vite 的预打包原理以及性能真实的感受。

本文源码地址在 vite-playgrounds 中，如果阅读中发现问题，欢迎 pr。

本文是在 React 工程的 VS Code 插件及配置 基础上编写的，当时写的时候是 2018 年，至今项目组使用 React 开发已经两年多了，是时候更新一波 Visual Studio Code 插件使用文档了。本文主要以实用为目的，本着不折腾的原则，只挑选平时开发 React 工程用的顺手的插件、主题和字体，也欢迎同学们推荐好用的效率神器。

• 原文地址：5 Tools for Faster Development in React
• 原文作者：Jonathan Saring
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/5-tools-for-faster-development-in-react.md
• 译者：Ivocin
• 校对者：Haoze Xu, Junkai Liu
• 本文掘金地址：[译] 5 款工具助力 React 快速开发

本文将会介绍 5 款工具，可加速 React UI 组件和应用程序的开发工作。

• 原视频地址：React Today and Tomorrow and 90% Cleaner React with Hooks
• 中英文字幕视频地址（B站）：【React Conf 2018】React 的今天和明天中英文双字幕
• 中英文字幕视频地址（爱奇艺）：React Today And Tomorrow Part II —— 中英双语字幕
• 英文文稿地址：React Today and Tomorrow - Part II
• 演讲者: Dan Abramov
• 英文字幕出自：YouTube 机器翻译
• 英文校对、翻译：Ivocin, 程序媛_小发
• 排版：Ivocin
• 本文掘金地址：[译] React 的今天和明天（图文版） —— 第二部分

因为这个演讲 Dan 的 Demo 部分比较多，建议如果时间充裕，可以观看视频。希望看本文视频的同学，可以查看我的这篇文章：React Conf 2018 专题 —— React Today and Tomorrow Part II 视频中英双语字幕。第一部分 Sophie Alpert 的演讲图文版地址：[译] React 的今天和明天（图文版） —— 第一部分

本文掘金地址：React Conf 2018 专题 —— React Today and Tomorrow Part II 视频中英双语字幕
距离 React Conf 2018 结束已经将近一个月了，距离上个 React Conf 2018 的中英文双语视频发布也有两周的时间了，这两周，一直在进行Dan Abramov 的关于 React Hooks 提案部分演讲的字幕校对和翻译工作，感谢开源社区，这次加入了新的小伙伴 程序媛_小发 一起完成了校对和翻译的工作，让这段视频可以更快的和大家见面。

• 原视频地址：React Today and Tomorrow and 90% Cleaner React with Hooks
• 中英文字幕视频地址（B站）：【React Conf 2018】React 的今天和明天中英文双字幕
• 中英文字幕视频地址（爱奇艺）：React Today And Tomorrow Part I —— 中英双语字幕
• 英文原文地址：React Today and Tomorrow - Part I
• 中文译文（无图版）地址：React 的今天和明天—— 第一部分
• 演讲者： Sophie Alpert
• 英文字幕出自：YouTube 机器翻译
• 英文校对、翻译、排版：Ivocin
• 本文掘金地址：[译] React 的今天和明天（图文版） —— 第一部分

2018年 11 月 30 日更新，第二部分已经更新：[译] React 的今天和明天（图文版） —— 第二部分 。前两部分中英双语字幕视频已经发布：【React Conf 2018】React 的今天和明天中英文双字幕。

本文掘金地址：React Conf 2018 专题 —— React Today and Tomorrow Part I 视频中英双语字幕
最近在 掘金翻译计划 校对了一篇 Dan Abramov 的关于 React Hooks 的文章，在 Sophie Alpert 和 Dan 在 React Conf 2018 上对 Hooks 的提案之后， Hooks 非常火。想到由于原视频在 Youtube 上的原因导致大部分小伙伴没法观看，而且官方没有提供英文字幕，YouTube 里面的英文字幕是机器自动生成的，错误比较多也没有断句，所以想把 React Conf 2018 的视频中英文字幕配好供大家一起学习。我看B站上已经搬运了 React Conf 2018 的全套视频，大家可以去围观。

2018年11月30日更新，小发已经把前两部分视频上传到 b 站上了，没广告特别好，视频地址：【React Conf 2018】React 的今天和明天中英文双字幕

视频地址：React Today And Tomorrow Part I —— 中英双语字幕

• 原文地址：Idle Until Urgent
• 原文作者：PHILIP WALTON
• 译文出自：掘金翻译计划
• 本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO1/idle-until-urgent.md
• 译者：Ivocin
• 校对者：xilihuasi，新舰同学 Xekin
• 本文掘金地址：[译] Google 工程师提升网页性能的新策略：空闲执行，紧急优先

几周前，我开始查看我网站的一些性能指标。具体来说，我想看看我的网站在最新的性能指标 —— 首次输入延迟 （FID）上的表现如何。 我的网站只是一个博客（并没有运行很多的 JavaScript），所以我原本预期会得到相当不错的结果。

前言

最近一个月来使用 dva 对公司存量项目进行重构，比较少时间写文章了。随着9月开学季节的到来，最近在使用的几个开源项目都迎来了重大更新。首先就是 umi 终于迎来了 2.0 版本，具体介绍可以查看 发布 umi 2.0，可插拔的企业级 react 应用框架。随之而来的是使用 umi@2 构建的 ant design pro 2.0 版本，具体介绍可以查看漂亮的实力派 Ant Design Pro 2.0 正式发布。今天终于有时间体验了 umi@2 ，想起我的 dva 学习之路的第一篇学习记录是使用 umi@1.X 构建的，刚好可以使用 umi 2.0 重新构建一下。本文是 dva 作者 @sorrycc 的 umi-dva-user-dashboard 的 umi@2 版本实现，是 《umi + dva，完成用户管理的 CURD 应用》 文章的 umi@2 版本改写。代码仓库： umi2-dva-user-dashboard。演示地址：demo。