React Hooks使用实例（一）

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

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

去React官方网站了解React Hooks的基本概念和使用方式。
官方文档连接：reactjs.org/docs/hooks-…

使用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组件确定会使用到（没使用过的举手🙋‍♂️？）。

目前React的组件库，比较流行的应该是阿里的ant.design了，咱们在使用这个的时候，是否是常常会写不少重复的逻辑在各个组件里面呢？要么就是本身实现一个高阶组件来抽象一层，让其余组件能够复用。 可是高阶组件目前也有一个大的问题就是嵌套地狱，咱们看下这个图：

大概就是这样子，若是你知道js的回调地狱的话，应该知道我在说什么，对不对？

而后咱们来看下使用React Hooks怎么实现一个自定义的Modal组件。

export const useModal = (initTitle: string, initContent: string | React.ReactElement) => {
    const [visible, setVisible] = useState(false);
    const [title, setTitle] = useState(initTitle);
    const [content, setContent] = useState(initContent);
    const CustomModal =  () => {
        return (
            <Modal visible={visible} title={title} closable={false} footer={null} > {content} </Modal>
        );
    }
    const show = (content?: string | React.ReactElement) => {
        content && setContent(content);
        setVisible(true);
    };
    const hide = (delay?: number) => {
        if (delay) {
            setTimeout(() => setVisible(false), delay);
        } else {
            setVisible(false)
        }
    };
    return {
        show, hide, CustomModal, setTitle, setContent
    }
}
复制代码

使用：

const {hide, show, CustomModal} = useModal('系统提示',  '正在初始化...');
 
render() {
    <div><CustomModal /></div>
}
复制代码

在上面的代码中，首先咱们使用了useState定义了3个state属性，这里示例中就3个，若是你须要更多的自定义内容，能够本身再扩展。useState方法给定一个初始化的属性值，返回一个属性变量和设置该属性的方法。 以visible为例，这个属性用来控制Modal的隐藏和显示。在使用useState方法返回的setVisible的时候，组件状态会自动更新，而后触发从新渲染，是否是跟React的Class组件的setState有点相似?

在自定义的Modal中，咱们返回了show，hide方法，setTitle，setContent方法，以及一个CustomModal组件，这样外部在使用的时候就能够直接像上面的使用代码同样，放到render中便可。

在须要修改title或者修改内容的时候，调用setTitle和setContent修改modal中的内容，注意这里的setContent不止能够传入String，还能够传入一个ReactElement，全部里面的你能够传一个Form进去，实现弹出框形式的表单组件。

总结

本篇文章主要讲了如下几个点：
– Suspense组件的使用方式
– lazy方法的使用，以及webpack自定义chunk name
– 使用useState自定义Modal框

---

AlloyTeam 欢迎优秀的小伙伴加入。
简历投递: alloyteam@qq.com
详情可点击 腾讯AlloyTeam招募Web前端工程师(社招)