前面介紹了幾種不同的 Hook,現在我們將要來建立屬於自己的客製化 hook 了!
其實客製化的 hook 就是一個 function,和前面提到的幾種 hook 一樣,只是在客製化 hook 裡面可以做自己要做的事情,這樣有助於簡化程式碼當中複雜的邏輯,將其模組化到其他檔案當中。
差異在於 compoment 最後會回傳 JSX ,而 custom hook 會回傳一些資料。
custom hook 在不同元件呼叫都會是不同的獨立實體,擁有自己的資料。
custom hook 之中也可以使用如前面介紹的 useState、useEffect⋯⋯諸如此類的 hook。
Custom Hook 同樣受到 hook 的使用限制,一樣包含前面所提過的三點:
custom hook 命名方式基本上遵守前面幾種 hook 的命名方式,以 useXXXX 來命名。今天我們要設計一個計算字數的 hook。
先到專案目錄下建立一個 useTextCounter.js 的檔案,並篩寫以下程式碼:
import { useState, useEffect } from 'react';
const useTextCounter = (text) => {
const [ textLen, setTextLen ] = useState(0);
useEffect(
() => {
setTextLen(text.length)
},[text]
)
return textLen;
}
export default useTextCounter;
在篩寫函式的時候記得要帶入參數,在這裡我們帶入要被計算字數的文字。
最後函式記得要回傳需要的資料,這裡我們回傳計算的字數。
記得,可以在 custom hook 當中使用其他現成的 hook。
回到 App.js 當中,我們引入寫好的 useTextCounter.js 並使用
import React, { useState } from 'react';
import useTextCounter from './useTextCounter.js'
const App = (props) => {
const [text, setText] = useState("");
const textLen = useTextCounter(text);
return (
<>
<input type="text" onChange={(e)=>{setText(e.target.value)}}></input> <hr/>
<h3>現在字數:{ textLen }</h3>
</>
);
};
export default App;
這裡我們建立一個 text 的 state,並將其傳入 useTextCounter 這個 hook,並以 textLen 來接收回傳的字數,執行效果如下:
同樣一個 custom hook 在不同元件被呼叫都是不同的實體,我們建立一個新的 TwoComponent.js:
import React, { useState } from 'react';
import useTextCounter from './useTextCounter';
const TwoComponent = () => {
const [text, setText] = useState("");
const textLen = useTextCounter(text);
return (
<>
<input type="text" onChange={(e)=>{setText(e.target.value)}}></input> <hr/>
<h3>現在字數2:{ textLen }</h3>
</>
);
}
export default TwoComponent;
一樣將字串傳給 useTextCounter 計算字數。
再來修改 App.js,引入 TwoComponent :
import React, { useState } from 'react';
import useTextCounter from './useTextCounter'
import TwoComponent from './TwoComponent'
const App = (props) => {
const [text, setText] = useState("");
const textLen = useTextCounter(text);
return (
<>
<input type="text" onChange={(e)=>{setText(e.target.value)}}></input> <hr/>
<h3>現在字數1:{ textLen }</h3>
<hr/>
<TwoComponent></TwoComponent>
</>
);
};
export default App;
執行結果如下:
會發現兩個元件都呼叫了 useTextCounter,但兩者有不同的數值。
如果 custom hook 利用 [ , ] 回傳多參數,使用時也要利用 [ , ] 的形式來接收,例如上述的 Hook 將 return 改成這樣:
import { useState, useEffect } from 'react';
const useTextCounter = (text) => {
const [ textLen, setTextLen ] = useState(0);
useEffect(
() => {
setTextLen(text.length)
},[text]
)
return [text, textLen];
}
export default useTextCounter;
那麼使用時就要改成這樣:
const [text, textLen] = useTextCounter(text);
Custom Hook 可以讓你把程式變得更模組化,不必重複篩寫同樣的程式碼,也不必為此篩寫成 component 。
React Hook 的部分的此告一段落,我們共介紹了五種不同的 Hook,其中 useState 以及 useEffect 會很頻繁的使用,如果還沒看過可以點以下連結回去看看:
關於作者
粉絲專頁
文章分類