自定義Hooks函數獲取窗口大小（十一）

其實自定義Hooks函數和用Hooks建立組件很類似，跟咱們平時用JavaScript寫函數幾乎如出一轍，可能就是多了些React Hooks的特性，自定義Hooks函數偏向於功能，而組件偏向於界面和業務邏輯。因爲差異不大，因此使用起來也是很隨意的。若是是小型項目是能夠的，可是若是項目足夠複雜，這會讓項目結構不夠清晰。因此學習自定義Hooks函數仍是頗有必要的。

編寫自定義函數

在實際開發中，爲了界面更加美觀。獲取瀏覽器窗口的尺寸是一個常常使用的功能，這樣常常使用的功能，就能夠封裝成一個自定義Hooks函數，記住必定要用use開頭，這樣才能區分出什麼是組件，什麼是自定義函數。

新建一個文件Example9.js,而後編寫一個useWinSize,編寫時咱們會用到useState、useEffect和useCallback因此先用import進行引入。

import React, { useState ,useEffect ,useCallback } from 'react';

而後編寫函數，函數中先用useState設置size狀態，而後編寫一個每次修改狀態的方法onResize，這個方法使用useCallback，目的是爲了緩存方法(useMemo是爲了緩存變量)。 而後在第一次進入方法時用useEffect來註冊resize監聽時間。爲了防止一直監聽因此在方法移除時，使用return的方式移除監聽。最後返回size變量就能夠了。

function useWinSize(){
    const [ size , setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[]) 
    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size;
}

這就是一個自定義函數，其實和咱們之前寫的JS函數沒什麼區別，因此這裏也不作太多的介紹。

編寫組件並使用自定義函數

自定義Hooks函數已經寫好了，能夠直接進行使用，用法和JavaScript的普通函數用起來是同樣的。直接在Example9組件使用useWinSize並把結果實時展現在頁面上。

function Example9(){

    const size = useWinSize()
    return (
        <div>頁面Size:{size.width}x{size.height}</div>
    )
}

export default Example9

以後就能夠在瀏覽器中預覽一下結果，能夠看到當咱們放大縮小瀏覽器窗口時，頁面上的結果都會跟着進行變化。說明自定義的函數起到了做用。

轉自：http://www.jspang.com/posts/2019/08/12/react-hooks.html