在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，比如填写表单时去查询某个列表获取一些字段信息再回到表单页面填写。这样的需求在 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 个系统。

• 原视频地址：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 —— 中英双语字幕

前言

最近一个月来使用 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。

前置知识

• dva
• roadhog
• umi
• dva知识地图
• 使用 umi 改进 dva 项目开发

在上篇文章使用Eject方式在 create-react-app 中使用 Ant Design of React中， 使用create-react-app创建了React项目，并使用 Eject方式暴露出了Webpack的配置，并成功按需引入了antd。本文主要内容：解决create-react-app创建项目后less不生效的问题；antd按需引入less源文件，以及遇到的bezierEasing.less文件报错问题；antd本地字体的配置方法；less使用css module的配置。

Ant Design 官网对 如何 react-app-rewired 的方式进行按需加载进行了说明，详见 在 create-react-app 中使用 一文，文中有这样一段话

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

本文主要就Eject方式进行探索