引言
React Hooks 是 React 16.8 版本引入的新特點，它容許我們在函數組件中「鉤子」利用類組件的特點，如狀況管理、生命周期等。其中，useState 跟 useEffect 是兩個最常用的 Hooks，本文將經由過程實戰示例來剖析它們的利用方法。
useState實戰示例
useState 用於在函數組件中增加狀況，它接收一個初始值作為參數，並前去一個包含以後狀況值跟更新狀況值的數組。以下是一個簡單的示例：
import React, { useState } from 'react';
function Counter() {
// 申明一個名為 "count" 的狀況變數，初始值為 0
const [count, setCount] = useState(0);
return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>點擊我</button>
</div>
);
}
export default Counter;
鄙人面的示例中，我們利用 useState 申明白一個名為 count 的狀況變數，並將其初始值設置為 0。setCount 是一個用於更新 count 的函數。每次點擊按鈕時，setCount 會將 count 的值增加 1。
useState進階
惰性初始化state
useState 會在組件的初次襯著時履行，並且在之後的襯著中不會重新履行。這意味著，useState 的初始化值會被設置為傳入的初始值，而不是組件掛載時的值。
function Counter() {
// 惰性初始化state
const [count, setCount] = useState(() => {
console.log('組件掛載');
return 0;
});
return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>點擊我</button>
</div>
);
}
鄙人面的示例中，即便我們修改了 useState 的初始值，它也不會影響組件的襯著。
獲取上一次的值
我們可能經由過程在 useState 的回調函數中轉達一個函數來獲取上一次的值。
function Counter() {
const [count, setCount] = useState(0);
const increment = (prevCount) => {
return prevCount + 1;
};
return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(increment(count))}>點擊我</button>
</div>
);
}
鄙人面的示例中，我們定義了一個名為 increment 的函數，它接收上一次的值作為參數，並前去新的值。如許，我們就可能在更新狀況時獲取到上一次的值。
useEffect實戰示例
useEffect 用於在函數組件中履行反感化操縱，如數據懇求、訂閱變亂等。它接收兩個參數：一個回調函數跟一個依附數組。以下是一個簡單的示例：
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`計數：${count}`);
}, [count]); // 依附數組為[count]，僅在count變更時履行反感化
return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>點擊我</button>
</div>
);
}
export default Counter;
鄙人面的示例中，我們利用 useEffect 來履行一個反感化操縱：在 count 變更時，列印出以後的計數。依附數組為 [count]，這意味著只有當 count 產生變更時，反感化操縱才會履行。
useEffect進階
清理反感化
在某些情況下，我們可能須要在組件卸載時履行一些清理操縱，比方撤消訂閱、清除準時器等。這時，我們可能利用 useEffect 的前去值來履行清理操縱。
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
let timer;
useEffect(() => {
timer = setTimeout(() => {
console.log(`計數：${count}`);
}, 1000);
return () => {
clearTimeout(timer);
};
}, [count]); // 依附數組為[count]，僅在count變更時履行反感化
return (
<div>
<p>你點擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>點擊我</button>
</div>
);
}
export default Counter;
鄙人面的示例中，我們利用 setTimeout 來模仿一個準時器，並在 useEffect 的前去值中清除準時器，以履行清理操縱。
總結
本文經由過程實戰示例剖析了 useState 跟 useEffect 的利用方法。在現實開辟中，公道利用這兩個 Hooks 可能幫助我們更好地管理組件的狀況跟反感化，進步代碼的可讀性跟可保護性。