React--自定義hooks

React內置的hooks函數解決了函數組件無法使用state以及在傳統寫法中生命週期函數混亂和this指向的問題。

而hooks所帶來的組件複用性的提升則是由自定義hooks來體現的。

傳統的組件複用多是渲染屬性或者是高階組件這兩種方式，缺點除了寫起來會相對複雜，還會造成組件層級過多。

先來看一個自定義hooks的例子：

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

上面useSize就是一個自定義的hooks函數，而在自定義的hooks一樣是可以使用React內置的hooks函數的。

值得注意的是，onResize這個回調函數是通過useCallback返回的，這是爲了保證最終移除監聽事件的時候傳給removeEventListener的onResize和剛開始監聽時傳給addEventListener的onResize句柄一致。

最後返回size對象。

這樣看起來自定義hooks函數實際上很像是一個函數組件，只是返回的內容不一樣。

不過自定義hooks也是可以返回一段JSX的：

function useSizeMonitor(){
    const size = useSize();
    
    return (
        <div>{size.width}x{size.height}</div>
    );
}

上面這個自定義hooks函數就使用了之前定義的useSize，然後返回了一段JSX，這就跟函數組件一樣了。