React Hooks使用實例（一）

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框

原文：http://www.alloyteam.com/2019...
作者：TAT.zhongzhong