React Hook的用法： Ref + useMemo + 自定義Hook(三)

React Hook的用法

Ref Hook

這個Hook的作用是可以通過他來獲取到Dom元素節點，使用起來非常方便。
關鍵代碼如下:

const xxxEle = useRef(initialValue);

useRef返回一個ref變量，並接受一個初始值 initialValue 這個傳入的初始值會複製給useRef返回變量的 .current 屬性上(這裏就是 xxxEle.current)。如果沒有需要傳入的初始值的話，一般直接傳入 null 即可，然後就可以將返回的Ref變量附加在具體的dom元素上。類似下面

<div ref={divEle}></div>

這樣 xxxEle.current 屬性就會一直指向該 Dom元素。

那麼我們是否能夠通過 Ref獲取函數子組件呢？就類似在class 組件中父組件通過ref屬性獲取子組件的實例。答案是不能，因爲只有class組件纔有實例，函數本身是沒有實例對象的。比如看下面這個例子，設計了有一個函數組件，使用同樣的方式可以獲取對應的 div元素的dom信息，但是卻獲取不了函數子組件的信息，打開控制檯會顯示null。

在線Demo

useMemo Hook

一句話概括Memo的作用是把“創建”函數和依賴項數組作爲參數傳入 useMemo，它僅會在某個依賴項改變時才重新計算 memoized 值。這種優化有助於避免在每次渲染時都進行高開銷的計算。

Memo Hook 使用起來和 Effect Hook 非常的相似，關鍵代碼如下：

 useMemo(fn,[params]) 

第一個參數是一個執行函數, 該函數(fn)會在該函數組件剛創建的時候執行一次，
後面的參數是一個數組，數組中可以登記該函數組件中的變量，只有在第二個參數登記過的變量變化時纔會再次執行fn函數。這就實現了有條件的去執行子組件函數中的部分邏輯了，從而實現減少了性能開銷。
下面設計了一個說明該作用的例子。在父組件中控制兩個變量 age 和count,並可以通過按鈕去改變對應的值。子組件直接接受並展示父組件傳遞過來的這兩個變量。
但是隻有當父組件中 age 的值發生改變時，纔會運行 ageChange 這個函數
關鍵代碼如下:

import React, { useMemo } from "react";

從React 中引入 useMemo這個鉤子。
在子組件中：

  const ageVal = useMemo(() => ageChange(age), [age]);

子組件使用useMomo這個Hook，並在等二個參數中登記age這個變量，那只有父組件中age變量發生改變的時候纔會運行 ageChange的方法，並且該函數經過ageChange業務處理後返回一個值(這裏就是age本身)供子函數使用。

在線Demo

自定義Hook

通過前面兩篇文章總結了業務中常見的幾種React 提供的Hook, 除了React提供的Hook之外，當然開發者也可以根據自身業務場景需要開發出特定的Hook。可以說Hook天生自帶輪子光環，用的好的話對平常中的業務開發是非常有用的，這裏舉一個例子，開發一個監聽頁面放縮的Hook並返回當前瀏覽器的尺寸。

在線Demo