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組件確定會使用到（沒使用過的舉手🙋‍♂️？）。

目前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前端工程師(社招)