如何釋放React?Hooks的力量
譯文譯者 | 李睿
審校 | 重樓
React是用于構建用戶界面的一個流行JavaScript庫，多年來已經發生了重大變化和改進。React中最具顛覆性的新特性之一就是引入了Hooks。React Hooks徹底改變了開發者在函數組件中管理狀態和生命周期的方式。在這個全面的指南中，將深入研究React Hooks的世界，探索它們的優點、用例，以及如何利用它們來編寫更干凈、更易于維護的React代碼。
介紹
由Facebook公司開發的React已經成為構建現代交互式Web應用程序的首選庫。傳統上，React組件被編寫為具有復雜狀態和生命周期管理的類。然而，隨著React 16.8在2019年初的發布，React團隊引入了Hooks，它使開發人員能夠在函數組件中使用狀態和其他React特性。React范式的這種轉變對開發人員編寫和構建代碼的方式產生了深遠的影響。
在這一指南中，將探索React Hooks的各個方面，從理解它們的核心概念到在現實場景中如何有效地使用。無論是React新手還是經驗豐富的開發人員，這一指南都旨在提供對React Hooks的全面了解。
什么是React Hooks?
React Hooks是讓用戶從函數組件中“掛鉤”React狀態和生命周期特性的函數。在Hooks出現之前，這些特性只能在類組件中使用。有了Hooks之后，函數組件現在能夠以更直接和更有表現力的方式管理狀態、執行副作用和訪問場景。
React Hooks背后的主要動機是簡化跨組件的重用有狀態邏輯，并完全消除對類組件的需求。Hooks是遵循命名約定的函數：它們都以use開頭。React提供了幾個內置Hooks，可以創建自己的自定義Hooks來封裝可重用邏輯。
以下探索一下關鍵的Hook和它們的用例。
采用Hooks背后的動機
在深入了解React Hooks的細節之前，重要的是要了解引入它們背后的動機：
重用有狀態邏輯
在類組件中，組件之間共享有狀態邏輯通常涉及復雜的模式，例如高階組件(HOC)和呈現props。這可能導致“包裝地獄”(wrapper hell)，并使代碼更難理解。Hooks允許用戶重用有狀態邏輯，而無需更改組件層次結構。這使得代碼更模塊化，更易于維護。
簡化組件邏輯
隨著類組件所包含的邏輯的增長，類組件會變得很麻煩。Hooks允許用戶根據組件封裝的邏輯將組件拆分為更小、更集中的函數。這使得代碼更容易閱讀和維護。
消除對類的需求
類組件具有更陡峭的學習曲線，對于具有函數式編程背景的開發人員來說可能不太直觀。Hooks提供了一種更實用的方式來使用React，使開發人員更容易理解和使用該庫。
減少樣板代碼
類組件通常需要為生命周期方法和綁定編寫重復的代碼。Hooks消除了很多這樣的樣板文件，產生了更干凈、更簡潔的代碼。
基本的Hooks
以下從基本構建塊開始走上React Hooks之旅：
useState
useState Hooks允許函數組件管理狀態。它獲取一個初始狀態值，并返回一個包含當前狀態的數組和一個用于更新狀態的函數。這里有一個基本的例子：
JavaScript
import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div> ); }
export default Counter;在本例中，使用useState初始化了一個初始值為0的計數狀態變量。當點擊“count”按鈕時，可以使用setCount函數更新計數狀態。
useEffect
useEffect Hooks使用戶能夠在函數組件中執行副作用。副作用包括數據獲取、DOM操作等。useEffect有兩個參數：一個包含副作用代碼的函數和一個可選的依賴項數組。
以下是一個在組件掛載時，從API獲取數據的例子：
JavaScript
import React, { useState, useEffect } from 'react';
function DataFetching()
{
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data)); }, []);
// Empty dependency array means this effect runs once
return (
<div>
{data ? (
<ul>
{data.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
) : (
<p>Loading data...</p>
)}
</div>
); }
export default DataFetching;在這個例子中，useEffect Hook在組件安裝時從API獲取數據（由于依賴項數組為空）。提取的數據存儲在數據狀態變量中，組件在可用時呈現它。
這些基本的Hook為管理函數組件中的狀態和執行副作用提供了基礎。然而，React提供了各種額外的Hooks來處理更復雜的場景。
額外的Hooks
React提供了幾個內置的Hook來滿足組件邏輯的不同方面。以下是一些常用的附加鉤子：
useContext
useContext Hooks允許函數組件訪問父組件的場景。提供了一種跨組件樹共享值(如主題或身份驗證狀態)的方法，而無需人工傳遞props。
下面是一個使用useContext來訪問組件中的主題的例子：
JavaScript
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() { const theme = useContext(ThemeContext);
return (
<button className={`btn btn-${theme}`}>Themed Button</button> ); }
export default ThemedButton;在這個例子中，useContext從ThemeContext中檢索當前主題，從而允許ThemedButton組件相應地設置自己的樣式。
useReducer
useReducer Hook是useState的一種替代方案，更適合管理復雜的狀態邏輯。它接受一個reducer函數和一個初始狀態，并返回當前狀態和一個dispatch函數。
下面是一個使用useReducer的簡單計數器的例子：
JavaScript
import React, { useReducer } from 'react';
function counterReducer(state, action) { switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state; } }
function Counter() {
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
); }
export default Counter;在這個例子中，定義了一個reducer函數counterReducer來處理狀態更新。useReducer Hook初始化狀態，并提供一個分派函數來分派動作。
useRef
useRef Hooks創建一個可變ref對象。Refs通常用于訪問DOM、管理焦點或緩存不會觸發重新渲染的值。
以下是使用useRef關注輸入元素的示例：
JavaScript
import React, { useRef } from 'react';
function InputWithFocus() {
const inputRef = useRef();
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
); }
export default InputWithFocus;在這個例子中，inputRef ref被附加到input元素上，使用戶能夠在單擊“focus input”按鈕時對其進行聚焦。
useCallback和useMemo
useCallback和useMemo Hooks用于通過記憶函數或計算值來優化性能。useCallback存儲一個函數，而useMemo存儲一個計算值。
以下是一個useMemo僅在數字發生變化時計算其平方的示例：
JavaScript
import { useState, useEffect } from 'react';
function useTimer(initialTime = 0) {
const [time, setTime] = useState(initialTime);
useEffect(() => {
const intervalId = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
return time; }
export default useTimer;在這個例子中，squaredNumber的值是使用useMemo來記憶的，所以只有當數字狀態改變時才會重新計算。
這些額外的Hook為用戶的函數組件提供了靈活性和優化機會。用戶可以混合和匹配這些Hooks以滿足應用程序的特定需求。
自定義Hooks
雖然React提供了一組內置的Hooks，但用戶也可以創建自己的自定義Hooks來封裝可重用的邏輯。自定義Hooks遵循相同的命名約定，并且可以在內部使用現有的Hooks。
JavaScript
import { useState, useEffect } from 'react';
function useTimer(initialTime = 0) {
const [time, setTime] = useState(initialTime);
useEffect(() => {
const intervalId = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => {
clearInterval(intervalId);
};
}, []);
return time; }
export default useTimer;在這個例子中，useTimer自定義Hook管理一個每秒遞增的計時器。它在內部使用useState和useEffect Hook。
用戶可以在任何函數組件中使用這個自定義Hook來管理計時器，而無需復制計時器邏輯。
常見的Hooks
React Hooks為簡化Web開發中的常見模式提供了許多可能性。以下來探索一些實際場景，其中Hooks可以特別有用：
數據獲取
從API或其他來源獲取數據是Web應用程序中的常見任務。用戶可以使用useEffect Hook來獲取數據和管理加載狀態。以下是一個簡單的例子:
JavaScript
import React, { useState, useEffect } from 'react';
function DataFetching() {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, []);
return (
<div>
{loading ? (
<p>Loading data...</p>
) : (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
); }
export default DataFetching;在本例中，使用useState來管理數據和加載狀態，并使用useEffect在組件裝載時獲取數據。
表單處理
表單是大多數Web應用程序的重要組成部分。React Hooks允許用戶更干凈地管理表單狀態和驗證邏輯，從而簡化了表單處理。以下是一個基本示例：
JavaScript
import React, { useState } from 'react';
function Form() {
const [formData, setFormData] = useState({
username: '', password: '', });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData, [name]: value, }); };
const handleSubmit = (e) => {
e.preventDefault(); // Handle form submission with formData
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="username" value={formData.username}
onChange={handleChange}
/>
<input type="password" name="password" value={formData.password}
onChange={handleChange}
/>
<button type="submit">Submit</button>
</form>
); }
export default Form;在這個例子中，使用useState Hook來管理表單數據，并使用handleChange函數來更新表單狀態。
結論
在這篇指南中，從React Hooks的介紹和動機到實際示例和常見模式，走遍了React Hooks的世界。React Hooks徹底改變了開發人員編寫React組件的方式，使函數組件比以往任何時候都更加強大和富有表現力。
React Hooks如今已經成為React開發人員工具包中的重要工具，可以提高代碼的可讀性、可維護性和可重用性。無論是想要開始使用React的初學者，還是想要重構代碼庫的經驗豐富的開發人員，React Hooks都提供了一種現代而有效的方式來構建健壯的Web應用程序。
原文標題：Unleashing the Power of React Hooks，作者：Atul Naithani
