詳解如何構建自己的react hooks

1. 常用的一個 hooks

官方中提供瞭幾個內置的鉤子,我們簡單瞭解下他們的用法。

1.1 useState: 狀態鉤子

需要更新頁面狀態的數據,我們可以把他放到 useState 的鉤子裡。例如點擊按鈕一下,數據加 1 的操作:

const [count, setCount] = useState(0);

return (<>
    <p>{ count}</p>
    <button onClick = {
        () => setCount(count + 1)
    }> add 1 </button>
    </>
);

在 typescript 的體系中,count 的類型,默認就是當前初始值的類型,例如上面例子中的變量就是 number 類型。如果我們想自定義這個變量的類型,可以在 useState 後面進行定義:

const [count, setCount] = useState<number | null>(null); // 變量count為number類型或者null類型

同時,使用 useState 改變狀態時,是整個把 state 替換掉的,因此,若狀態變量是個 object 類型的數據,我隻想修改其中的某個字段,在之前 class 組件內調用 setState 時,他內部會自動合並數據。

class Home extends React.Component {
    state = {
        name: 'wenzi',
        age: 20,
        score: 89
    };

    update() {
        this.setState({
            score: 98
        }); // 內部自動合並
    }
}

但在 function 組件內使用 useState 時,需要自己先合並數據,然後再調用方法,否則會造成字段的丟失。

const [person, setPerson] = useState({
    name: 'wenzi',
    age: 20,
    score: 89
});

setPerson({
    ...person,
    {
        score: 98
    }
}); // 先合並數據 { name: 'wenzi', age: 20, score: 98 }
setPerson({
    score: 98
}); // 僅傳入要修改的字段,後name和age字段丟失

1.2 useEffect: 副作用鉤子

useEffect 可以看做是 componentDidMount,componentDidUpdate 和 componentWillUnmount 這三個函數的組合。

useEffect 鉤子在組件初始化完畢時,一定會執行一次,在組件重新渲染的過程中,是否還要 update,還要看傳入的第 2 個參數。

  • 當隻有回調函數這一個參數時,組件的每次更新,回調都會執行;
  • 當有 2 個參數時,隻有第 2 參數裡的數據發生變化時,回調才執行;
  • 隻想在組件初始化完畢時隻執行一次,第 2 個參數可以傳入一個空的數組;

我們可以看下這個例子,無論點擊 add按鈕 還是 settime按鈕 ,useEffect 的回調都會執行:

const Home = () => {
    const [count, setCount] = useState(0);
    const [nowtime, setNowtime] = useState(0);

    useEffect(() => {
        console.log('count', count);
        console.log('nowtime', nowtime);
    });

    return ( <>
        <p>count: {count} </p>
        <p>nowtime: {nowtime} </p>
        <button onClick = {() => setCount(count + 1)}> add 1 </button>
        <button onClick = {() => setNowtime(Date.now())} > set now time </button>
    </>);
};

若改成下面的這樣,回調僅會在 count 發生變化時才會在控制臺輸出,僅修改 nowtime 的值時沒有輸出:

useEffect(() => {
    console.log('count', count);
    console.log('nowtime', nowtime);
}, [count]);

useEffect 的回調函數還可以返回一個函數,這個函數在 effect 生命周期結束之前調用。為防止內存泄漏,清除函數會在組件卸載前執行。另外,如果組件多次渲染,則在執行下一個 effect 之前,上一個 effect 就已被清除。

基於上面的代碼,我們稍微修改一下:

useEffect(() => {
    console.log('count', count);
    console.log('nowtime', nowtime);

    return () => console.log('effect callback will be cleared');
}, [count]);

基於這個機制,在一些存在添加綁定和取消綁定的案例上特別合適,例如監聽頁面的窗口大小變化、設置定時器、與後端的 websocket 接口建立連接和斷開連接等,都可以預計 useEffect 進行二次的封裝,形成自定義的 hook。關於自定義 hook,下面我們會講到。

1.3 useMemo 和 useCallback

function 組件中定義的變量和方法,在組件重新渲染時,都會重新重新進行計算,例如下面的這個例子:

const Home = () => {
    const [count, setCount] = useState(0);
    const [nowtime, setNowtime] = useState(0);

    const getSum = () => {
        const sum = ((1 + count) * count) / 2;
        return sum + ' , ' + Math.random(); // 這個random是為瞭看到區別
    };

    return ( <>
        <p> count: {count}< /p>
        <p> sum: {getSum()}</p>
        <p> nowtime: {nowtime}</p>
        <button onClick = {() => setCount(count + 1)} > add 1 </button>
        <button onClick = {() => setNowtime(Date.now())}> set now time </button>
    </>);
};

這裡有 2 個按鈕,一個是 count+1,一個設置當前的時間戳, getSun() 方法是計算從 1 到 count 的和,我們每次點擊 add 按鈕後,sum 方法都會重新計算和。可是當我們點擊 settime 按鈕時,getSum 方法也會重新計算,這是沒有必要的。

這裡我們可以使用 useMemo 來修改下:

const sum = useMemo(() => ((1 + count) * count) / 2 + ' , ' + Math.random(), [count]);

<p> {sum} </p>;

修改後就可以看到,sum 的值隻有在 count 發生變化的時候才重新計算,當點擊 settime 按鈕的時候,sum 並沒有重新計算。這要得益於 useMemo 鉤子的特性:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo 返回回調裡 return 的值,而且 memoizedValue 它僅會在某個依賴項改變時才重新計算。這種優化有助於避免在每次渲染時都進行高開銷的計算。如果沒有提供依賴項數組,useMemo 在每次渲染時都會計算新的值。

在上面的例子裡,隻有 count 變量發生變化時,才重新計算 sum,否則 sum 的值保持不變。

useCallback 與 useMemo 類型,隻不過 useCallback 返回的是一個函數,例如:

const fn = useCallback(() => {
    return ((1 + count) * count) / 2 + ' , ' + nowtime;
}, [count]);

2. 實現幾個自定義的 hook

在官方文檔裡,實現瞭好友的在線與離線功能。這裡我們自己也學著實現幾個 hook。

2.1 獲取窗口變化的寬高

我們通過監聽resize事件來獲取實時獲取window窗口的寬高,對這個方法進行封裝後可以在生命周期結束前能自動解綁resize事件:

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

使用起來也非常方便:

const Home = () => {
    const {width, height} = useWinResize();

    return <div>
        <p>width: {width}</p>
        <p>height: {height}</p>
    </div>;
};

2.2 定時器 useInterval

在前端中使用定時器時,通常要在組件生命周期結束前清除定時器,如果定時器的周期發生變化瞭,還要先清除定時器再重新按照新的周期來啟動。這種最常用的場景就是九宮格抽獎,用戶點擊開始抽獎後,先緩慢啟動,然後逐漸變快,接口返回中獎結果後,再開始減速,最後停止。

我們很容易想到用 useEffect 來實現這樣的一個 hook:

const useInterval = (callback, delay) => {
    useEffect(() => {
        if (delay !== null) {
            let id = setInterval(callback, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
};

我們把這段代碼用到項目中試試:

const Home = () => {
    const [count, setCount] = useState(0);

    useInterval(() => {
        console.log(count);
        setCount(count + 1);
    }, 500);

    return <div > {
        count
    } < /div>;
};

可是這段運行後很奇怪,頁面從 0 到 1 後,就再也不變瞭, console.log(count) 的輸出表明代碼並沒有卡死,那麼問題出在哪兒瞭?

React 組件中的 props 和 state 是可以改變的, React 會重渲染它們且「丟棄」任何關於上一次渲染的結果,它們之間不再有相關性。

useEffect() Hook 也「丟棄」上一次渲染結果,它會清除上一次 effect 再建立下一個 effect,下一個 effect 鎖住新的 props 和 state,這也是我們第一次嘗試簡單示例可以正確工作的原因。

但 setInterval 不會「丟棄」。 它會一直引用老的 props 和 state 直到你把它換掉 —— 不重置時間你是無法做到的。

這裡就要用到useRef這個 hook 瞭,我們把 callback 存儲到 ref 中,當 callback 更新時去更新 ref.current 的值:

const useInterval = (callback, delay) => {
    const saveCallback = useRef();

    useEffect(() => {
        // 每次渲染後,保存新的回調到我們的 ref 裡
        saveCallback.current = callback;
    });

    useEffect(() => {
        function tick() {
            saveCallback.current();
        }
        if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
};

當我們使用新的 useInterval 時,發現就可以自增瞭

這裡我們使用一個變量來控制增加的速度:

const [count, setCount] = useState(0);
const [diff, setDiff] = useState(500);

useInterval(() => {
    setCount(count + 1);
}, diff);

return ( <div>
    <p> count: {count} </p>
    <p> diff: {diff}ms </p> 
    <p>
        <button onClick = {() => setDiff(diff - 50)}> 加快50ms </button> 
        <button onClick = {() => setDiff(diff + 50)} > 減慢50ms </button>
    </p>
</div>);

分別點擊兩個按鈕,可以調整count增加的速度。

3. 總結

使用react hook可以做很多有意思的事情,這裡我們也僅僅是舉幾個簡單的例子,後續我們也會更加深入瞭解hook的原理。

以上就是如何構建自己的 react hooks的詳細內容,更多關於如何構建自己的 react hooks的資料請關註WalkonNet其它相關文章!