React Hooks使用实例（一）

原文：React Hooks使用实例（一）| AlloyTeam
作者：TAT.zhongzhong

React Hooks出来也有一段时间了，在这个过程中有一个前端的React项目是专门用的React的FC组件形式来写的。在过程中提炼了一些使用实例，这里记录下。还有，如果你之前从来没有了解过React Hooks，建议你先

去React官方网站了解React Hooks的基本概念和使用方式。
官方文档链接：https://reactjs.org/docs/hooks-overview.html#state-hook

使用Suspense和lazy实现模块懒加载功能

在之前的项目中，如果我们要实现React应用模块的懒加载，用到最多的应该是react-loadable这个库，但是在现在，官方提供了内置的实现方案，就是使用lazy这个方法来实现。我们先来看下一个简单的示例：

import React, { Suspense, lazy } from "react";
const HomePage = lazy(() =>
    import(/* webpackChunkName: "home" */ "./modules/home")
);
 
<Suspense fallback={<div>加载中...</div>}>
    <Switch>
            <Route path="/home" component={HomePage} />
   </Switch>
</Suspense>

在上面的代码中，首先我们需要从react中导入Suspense组件和lazy方法，在接下来的代码中，通过lazy方法，加载对应的模块，lazy方法接收一个函数作为参数，这个函数返回一个Promise对象。

这里要注意的是上面的webpackChunkName这个注释，这个注释是webpack提供给我们使用的，主要用来自定义chunk的名称，因为我们这里使用了lazy+import，所以，webpack知道需要将指定路径下（这里就是modules/home）下的文件给打包到一个文件中，并且
使用webpackChunkName指定的名称来命名生成chunk包的名称，这里生成的chunk如下：

home.08cd8d71.chunk.js

Suspense组件用来在加载对应的模块过程中，展示用户友好的提示信息，这个组件有一个属性，fallback，这个属性可以是一个Ract的组件。这里我们就简单的显示“加载中…”这几个文本，这里你完全可以自己实现一个非常漂亮的组件（认真脸）。

这样之后，我们在浏览器里面打开，然后设置网络为slow 3g，查看效果

到这里，我们就使用React提供给我们的Suspense和lazy完成了懒加载的功能。

使用React Hooks实现自定义的Modal组件

不管你做什么样的前端项目，Modal组件肯定会使用到（没使用过的举手