溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹怎么構建自己的react hooks，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
官方中提供了幾個內置的鉤子，我們簡單了解下他們的用法。
需要更新頁面狀態的數據，我們可以把他放到 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字段丟失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，下面我們會講到。
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]);在官方文檔里，實現了好友的在線與離線功能。這里我們自己也學著實現幾個 hook。
我們通過監聽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>;
};在前端中使用定時器時，通常要在組件生命周期結束前清除定時器，如果定時器的周期發生變化了，還要先清除定時器再重新按照新的周期來啟動。這種最常用的場景就是九宮格抽獎，用戶點擊開始抽獎后，先緩慢啟動，然后逐漸變快，接口返回中獎結果后，再開始減速，最后停止。
我們很容易想到用 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增加的速度。
以上是“怎么構建自己的react hooks”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
