如何用ahooks控制時機的hook？

3403771864 發布于2022-11-05 16:52 / 445人閱讀

　　本篇主要和大家溝通關于ahooks ，我們可以理解為加深對 React hooks 的了解。

　　我們先說下關于抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。

　　其實我們應該培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。

　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。

　　現在就進入主題用ahooks 來封裝 React要注意的“時機”？

　　Function Component VS Class Component

　　很多時候代碼要講究先后順序，要掌握周期，且需知道在不同的階段執行不同操作的代碼，比如需要掛載完成之后才去獲取 dom 的值，否則可能會獲取不到相應的值。

　　Class Component

　　使用過 React 的 Class Component 的同學，就會知道其組件生命周期會分成三個狀態：

　　Mounting(掛載)：已插入真實 DOM

　　Updating(更新)：正在被重新渲染

　　Unmounting(卸載)：已移出真實 DOM

　　簡單版如下所示：

　　其中每個狀態中還會按順序調用不同的方法，直接看下圖：

　　先要詳細了解，就去官網詳看。可以看到，會有非常多的生命周期方法，而且在不同的版本，生命周期方法還不同。

　　Function Component

　　沒有生命周期的概念—Function Component ，它是更徹底的狀態驅動，它只有一個狀態，React 負責將狀態渲染到視圖中。

　　對于 Function Component 來說由狀態到頁面渲染只有三步：

　　輸入狀態（prop、state）

　　執行組件的邏輯，并在useEffect/useLayoutEffect中訂閱副作用

　　輸出UI（Dom節點）

　　重點是第二步，React 通過 useEffect/useLayoutEffect 訂閱副作用。Class Component 中的生命周期都可以通過 useEffect/useLayoutEffect 來實現。它們兩個的功能非常相似，我們這里看下 useEffect。

　　使用 useEffect 相當于告訴 React 組件需要在渲染后執行某些操作，React 將在執行 DOM 更新之后調用它。React 保證了每次運行 useEffect 的時候，DOM 已經更新完畢。這就實現了 Class Component 中的 Mounting(掛載階段)。

　　當狀態發生變化的時候，它能夠執行對應的邏輯、更行狀態并將結果渲染到視圖中，這就完成了 Class Component 中的 Updating（更新階段）。

　　最后通過在 useEffect 中返回一個函數，它便可以清理副作用。它的規則是：

　　首次渲染不會進行清理，會在下一次渲染，清除上一次的副作用。

　　卸載階段也會執行清除操作。

　　通過返回一個函數，我們就能實現 Class Component 中的 Unmounting(卸載階段)。

　　基于 useEffect/useLayoutEffect，ahooks 做了一些封裝，能夠讓你更加清晰的知道你的代碼執行時機。

　　LifeCycle - 生命周期

　　useMount

　　只在組件初始化時執行的 Hook。 useEffect 依賴假如為空，只會在組件初始化的時候執行。

　// 省略部分代碼
　　const useMount = (fn: () => void) => {
　　// 省略部分代碼
　　// 單純就在 useEffect 基礎上封裝了一層
　　useEffect(() => {
　　fn?.();
　　}, []);
　　};
　　export default useMount;

　　useUnmount

　　useUnmount，組件卸載（unmount）時執行的 Hook。

　　useEffect 可以在組件渲染后實現各種不同的副作用。有些副作用可能需要清除，所以需要返回一個函數，這個函數會在組件卸載的時候執行。

　　const useUnmount = (fn: () => void) => {
　　const fnRef = useLatest(fn);
　　useEffect(
　　// 在組件卸載（unmount）時執行的 Hook。
　　// useEffect 的返回值中執行函數
　　() => () => {
　　fnRef.current();
　　},
　　[],
　　);
　　};
　　export default useUnmount;

　　useUnmountedRef

　　獲取當前組件是否已經卸載的 Hook。

　　通過判斷有沒有執行 useEffect 中的返回值判斷當前組件是否已經卸載。

　// 獲取當前組件是否已經卸載的 Hook。
　　const useUnmountedRef = () => {
　　const unmountedRef = useRef(false);
　　useEffect(() => {
　　unmountedRef.current = false;
　　// 如果已經卸載，則會執行 return 中的邏輯
　　return () => {
　　unmountedRef.current = true;
　　};
　　}, []);
　　return unmountedRef;
　　};
　　export default useUnmountedRef;

　　Effect

　　這里只會講官方文檔Effect下面的幾個，有部分是定時器、防抖節流等，咱們后面的系列具體分析。

　　useUpdateEffect 和 useUpdateLayoutEffect

　　useUpdateEffect 和 useUpdateLayoutEffect 的用法跟 useEffect 和 useLayoutEffect 一樣，只是會忽略首次執行，只在依賴更新時執行。

　　實現思路：初始化一個標識符，剛開始為 false。當首次執行完的時候，置為 true。只有標識符為 true 的時候，才執行回調函數。

　　// 忽略首次執行
　　export const createUpdateEffect: (hook: effectHookType) => effectHookType =
　　(hook) => (effect, deps) => {
　　const isMounted = useRef(false);
　　// for react-refresh
　　hook(() => {
　　return () => {
　　isMounted.current = false;
　　};
　　}, []);
　　hook(() => {
　　// 首次執行完時候，設置為 true，從而下次依賴更新的時候可以執行邏輯
　　if (!isMounted.current) {
　　isMounted.current = true;
　　} else {
　　return effect();
　　}
　　}, deps);
　　};

　　useDeepCompareEffect和useDeepCompareLayoutEffect

　　用法與 useEffect 一致，但 deps 通過 lodash isEqual 進行深比較。

　　通過 useRef 保存上一次的依賴的值，跟當前的依賴對比（使用 lodash 的 isEqual），并將對比結果作為 useEffect 的依賴項，從而決定回調函數是否執行。

　　　const depsEqual = (aDeps: DependencyList, bDeps: DependencyList = []) => {
　　return isEqual(aDeps, bDeps);
　　};
　　const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
　　// 通過 useRef 保存上一次的依賴的值
　　const ref = useRef<DependencyList>();
　　const signalRef = useRef<number>(0);
　　// 判斷最新的依賴和舊的區別
　　// 如果相等，則變更 signalRef.current，從而觸發 useEffect 中的回調
　　if (!depsEqual(deps, ref.current)) {
　　ref.current = deps;
　　signalRef.current += 1;
　　}
　　useEffect(effect, [signalRef.current]);
　　};

　　useUpdate

　　useUpdate 會返回一個函數，調用該函數會強制組件重新渲染。

　　返回的函數通過變更 useState 返回的 state，從而促使組件進行更新。

　　import { useCallback, useState } from 'react';
　　const useUpdate = () => {
　　const [, setState] = useState({});
　　// 通過設置一個全新的狀態，促使 function 組件更新
　　return useCallback(() => setState({}), []);
　　};
　　export default useUpdate;

　　總結與思考

　　寫代碼要清楚知道，組件的生命周期是怎樣的，還有代碼的執行順序、執行的時機是怎樣的。

　　在 Function Component 中，使用 useEffect/useLayoutEffect 完成了 Class Components 生命周期的職責。ahooks 這就是的代碼執行時機，要是添加hook，就可以讓代碼具有可讀性以及邏輯更加清晰。

GPU云服務器云服務器阿里云服務器如何用向日葵控制如何用國外的服務器呢如何用微博推廣自己的網站如何用微博宣傳自己的網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/128256.html

ahooks正式發布React Hooks工具庫

　　起因　　社會在不斷的向前，技術也在不斷的完善進步。從 React Hooks 正式發布到現在，越來越多的項目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。這樣的解析是不是很熟悉，在日常中時常都有用到，但也有一個可以解決這樣重復的就是對數據請求的邏輯處理，對防抖節流的邏輯處理等。另一方面，由于 Hoo...

3403771864 2022-11-08 23:18 評論0 收藏0
React官方團隊實例原生Hook閉包陷阱

　　陷進到處都是啊！本篇文章就說說Hooks使用時存在所謂的閉包陷阱，看看下面代碼：　　functionChat(){ 　　const[text,setText]=useState(''); 　　constonClick=useCallback(()=>{ 　　sendMessage(text); 　　},[]); 　　return<SendButtononClick=...

3403771864 2022-11-05 17:16 評論0 收藏0
解析ahooks整體架構及React工具庫源碼

　這是講 ahooks 源碼的第一篇文章，簡要就是以下幾點：　　加深對 React hooks 的理解?！　W習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。　　培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情。　　第一篇主要介紹 a...

3403771864 2022-11-06 18:34 評論0 收藏0
詳解ahooks解決React閉包問題方法

　　想必大家都能看得懂的源碼 ahooks 整體架構篇，且可以使用插件化機制優雅的封裝你的請求hook，現在我們就探討下ahooks 是怎么解決 React 的閉包問題的？。　　React 的閉包問題　　先來看一個例子：　　importReact,{useState,useEffect}from"react"; 　　exportdefault()=>{ 　　const[c...

3403771864 2022-11-06 16:51 評論0 收藏0
關于ahooks封裝cookie localStorage sessionStorage方法

　　之所以講這篇文章主要是為了加深對 React hooks 的理解?！　∫虼?，先要學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫?！　∏遗囵B閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇?！　‖F在看下ahooks 是怎么封裝 cookie/localStorage/sessionStorage 的?！　ookie　　ahooks 封裝了 useCookie...

3403771864 2022-10-26 22:47 評論0 收藏0