之前写过一篇 Vue 异步组件的文章，最近在做一个简单项目的时候又想用到 React 异步组件，所以简单地了解了一下使用方法，这里做下笔记。

传统的 React 异步组件基本都靠自己实现，自己写一个专门的 React 组件加载函数作为异步组件的实现工具，通过 import() 动态导入，实现异步加载，可以参考【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）这篇文章。这样做的话还是要自己写一个单独的加载组件，有点麻烦。于是想找个更简单一点的方式，没想到真给找到了：Async React using React Router & Suspense，这篇文章讲述了如何基于 React Router 4 和 React 的新特性快速实现异步组件按需加载。

2018 年 10 月 23 号，React 发布了 v16.6 版本，新版本中有个新特性叫 lazy，通过 lazy 和 Suspense 组件我们就可以实现异步组件，如果你使用的是 React v16.6 以上版本：

之前看了一下 TypeScript 的知识，但是一直没有上手，最近开始结合 React 和 TypeScript 一起尝试了一下，感受还是很好的，所以写一下笔记。

环境配置没有参考其他东西，就是看了下 Webpack 和 TypeScript 的官方文档，使用 Webpack 进行构建还是比较简单的。

环境构建

创建一个项目目录，然后切换当前目录到项目目录下：

1

$ mkdir tsc && cd ./tsc

然后使用 npm 初始化项目：

1

$ npm init -y

然后创建一些项目文件：

1
2

$ mkdir build src
$ touch build/webpack.base.conf.js build/webpack.dev.conf.js build/webpack.prod.conf.js index.html src/index.tsx tsconfig.json

接下来，就可以安装一些依赖了：

1
2
3

$ npm i webpack webpack-cli webpack-merge webpack-dev-server -D
$ npm i html-webpack-plugin clean-webpack-plugin typescript ts-loader style-loader css-loader @types/react @types/react-dom -D
$ npm i react react-dom -S

可以注意到我们没有安装 babel 转译器，如果我们只写 .ts 或者 .tsx 文件，可以不安装 babel。如果要转译处理 .js 文件的话，还是要使用到 babel。

关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了，两种说法都有，这种问题懒得纠结了……在用的时候发现这个东西很好用，平常用处可能不大，但是结合 React 就很好使了。接下来就讲一讲。

一、环境搭建

我搭建了一个 React 开发环境，结合 babel 的插件——babel-plugin-transform-decorators-legacy一起使用，这个插件可以让你写 Decorator。

GitHub 地址：https://github.com/zhongdeming428/HOC

可以通过如下命令克隆：

1

$ git clone https://github.com/zhongdeming428/HOC.git