從變量角度理解Hooks

在React的世界里，Hooks的引入為函數(shù)式組件帶來了前所未有的靈活性和能力。它們讓我們得以完全擺脫class式的寫法，在函數(shù)式組件中完成生命周期管理、狀態(tài)管理、邏輯復(fù)用等幾乎全部組件開發(fā)工作。這次，我們就從變量的角度來深入理解一下這些強(qiáng)大的Hooks。

一、useState：定義自變量

想象一下，我們有一個自變量x，它代表組件的某個狀態(tài)。在React中，我們可以使用useState來定義這個自變量：

const [x, setX] = useState(0);

這里，x就是我們的自變量，而setX是一個函數(shù)，用于改變x的值。

接下來，我們定義一個因變量y，它是x的函數(shù)：

const y = 2 * x + 1;

每次x變化時，y都會隨之更新。

為了演示這個過程，我們可以創(chuàng)建一個簡單的點(diǎn)擊事件，每次點(diǎn)擊時x增加1：

export default function App() {const [x, setX] = useState(0);const y = 2 * x + 1;const changeX = () => setX(x + 1);return (<ul onClick={changeX}><li>x是{x}</li><li>y是{y}</li></ul>);
}

二、useMemo & useCallback：緩存因變量

在上面的例子中，每次組件重新渲染時，y和changeX都會重新計(jì)算。但在復(fù)雜的業(yè)務(wù)場景中，這些計(jì)算可能會變得非常昂貴。為了優(yōu)化性能，我們可以使用useMemo和useCallback來緩存這些因變量。

useMemo用于緩存一個數(shù)據(jù)類型的因變量：

//const y = 2 * x + 1;
const y = useMemo(() => 2 * x + 1, [x]);

而useCallback則用于緩存一個函數(shù)類型的因變量：

//const changeX = () => setX(x + 1);
const changeX = useCallback(() => setX(x + 1), [x]);

這兩個Hooks都接收一個創(chuàng)建函數(shù)和一個依賴項(xiàng)數(shù)組作為參數(shù)。只要依賴項(xiàng)不變，它們就會返回緩存的值或函數(shù)，從而避免不必要的計(jì)算。

三、useEffect：處理副作用

在函數(shù)式編程中，副作用是指一個函數(shù)在固定的輸入下產(chǎn)生不固定的輸出。在React中，副作用通常包括修改DOM、發(fā)起網(wǎng)絡(luò)請求、設(shè)置定時器等。

為了處理這些副作用，我們可以使用useEffect。它允許我們定義一個函數(shù)，在組件渲染后執(zhí)行副作用邏輯。

例如，我們希望當(dāng)x變化時，將頁面標(biāo)題修改為x的值：

useEffect(() => {document.title = x;
}, [x]);

這里，useEffect接收一個函數(shù)和一個依賴項(xiàng)數(shù)組。當(dāng)依賴項(xiàng)變化時，函數(shù)會被執(zhí)行。

四、useReducer：管理復(fù)雜狀態(tài)

當(dāng)組件的狀態(tài)變得復(fù)雜時，我們可以使用useReducer來管理它們。useReducer可以看作是useState的進(jìn)階版，它使用Redux的理念，將多個狀態(tài)合并為一個狀態(tài)對象，并通過一個reducer函數(shù)來更新狀態(tài)。

• useReducer 和 redux 中 reducer 很像
• useState 內(nèi)部就是靠 useReducer 來實(shí)現(xiàn)的
• useState 的替代方案，它接收一個形如 (state, action) => newState 的 reducer，并返回當(dāng)前的 state 以及與其配套的 dispatch 方法
• 在某些場景下，useReducer 會比 useState 更適用，例如 state 邏輯較復(fù)雜且包含多個子值，或者下一個 state 依賴于之前的 state 等

let initialState = 0;
// 如果你希望初始狀態(tài)是一個{number:0}
// 可以在第三個參數(shù)中傳遞一個這樣的函數(shù) ()=>({number:initialState})
// 這個函數(shù)是一個惰性初始化函數(shù)，可以用來進(jìn)行復(fù)雜的計(jì)算，然后返回最終的 initialState
const [state, dispatch] = useReducer(reducer, initialState, init);

這里，state是我們的狀態(tài)對象，dispatch是一個函數(shù)，用于觸發(fā)狀態(tài)更新。

const initialState = 0;
function reducer(state, action) {switch (action.type) {case 'increment':return {number: state.number + 1};case 'decrement':return {number: state.number - 1};default:throw new Error();}
}
function init(initialState){return {number:initialState};
}
function Counter(){const [state, dispatch] = useReducer(reducer, initialState,init);return (<>Count: {state.number}<button onClick={() => dispatch({type: 'increment'})}>+</button><button onClick={() => dispatch({type: 'decrement'})}>-</button></>)
}

五、useContext: 跨組件層級傳遞自變量

useContext 允許你在組件樹中跨多層級訪問context（上下文）的值，而無需通過每層手動傳遞props。以下是對useContext的詳細(xì)解釋：
1、定義與功能

• 定義：useContext是一個React Hook，用于讀取和訂閱React組件中的context。
• 功能：它能夠在組件樹中共享數(shù)據(jù)，使得數(shù)據(jù)可以在不同層級的組件之間傳遞，而無需通過props逐層傳遞。

2、使用方式

1. 創(chuàng)建Context：首先，你需要使用React.createContext()方法創(chuàng)建一個context對象。這個對象不保存數(shù)據(jù)，但它作為數(shù)據(jù)的載體，允許你從組件中獲取或向組件提供數(shù)據(jù)。
2. 提供數(shù)據(jù)：然后，你需要在組件樹中使用Context.Provider包裹那些需要訪問context的組件，并通過value屬性向Provider提供數(shù)據(jù)。
3. 讀取數(shù)據(jù)：在需要訪問context的組件中，你可以使用useContext Hook來讀取context的值。你需要將先前創(chuàng)建的context對象作為參數(shù)傳遞給useContext。

3、示例

以下是一個簡單的示例，展示了如何使用useContext在組件之間共享數(shù)據(jù)：

import React, { createContext, useContext, useState } from 'react';// 創(chuàng)建一個Context對象
const MyContext = createContext('defaultValue');function App() {// 使用useState創(chuàng)建一個state，并通過Provider將其提供給后代組件const [value, setValue] = useState('newValue');return (<MyContext.Provider value={value}><ChildComponent /><ButtonComponent /></MyContext.Provider>);
}function ChildComponent() {// 在子組件內(nèi)使用useContext獲取context的值const contextValue = useContext(MyContext);return <div>Child Component: {contextValue}</div>;
}function ButtonComponent() {// 假設(shè)這里有一個函數(shù)用于修改context的值（實(shí)際中可能需要通過某種方式觸發(fā)這個函數(shù)）const handleClick = () => {// 這里需要一種方式來修改Provider中的value，通常是通過某種狀態(tài)管理或回調(diào)函數(shù)實(shí)現(xiàn)// 例如，可以使用useReducer或其他狀態(tài)管理庫來更新value};return <button onClick={handleClick}>Change Context Value</button>;
}export default App;

注意：在這個示例中，ButtonComponent組件需要一種方式來修改Provider中的value。在實(shí)際應(yīng)用中，這通常是通過某種狀態(tài)管理（如useState、useReducer）或回調(diào)函數(shù)來實(shí)現(xiàn)的。由于這個示例是為了說明useContext的用法，所以并沒有展示如何修改value的具體實(shí)現(xiàn)。

4、注意事項(xiàng)

(1) Provider嵌套：Provider組件可以嵌套使用，這樣你就可以在不同的層級提供不同的context值。
(2) 性能優(yōu)化：當(dāng)context的值發(fā)生變化時，React會自動重新渲染那些讀取了該context的組件。為了避免不必要的重渲染，你可以使用React.memo或shouldComponentUpdate等優(yōu)化技術(shù)。
(3) 默認(rèn)值：如果在組件樹中沒有找到對應(yīng)的Provider，useContext會返回傳遞給createContext的defaultValue。

總的來說，useContext是React中一個非常有用的Hook，它能夠幫助你在組件之間共享數(shù)據(jù)，從而簡化組件間的通信和狀態(tài)管理。

六、useRef：增加靈活性

最后，useRef作為一個標(biāo)記變量，提供了一種在組件的整個生命周期內(nèi)持久存儲數(shù)據(jù)的方法 , 并作用于自變量與因變量的不同路徑中。它增加了組件邏輯的靈活性，允許我們在組件的生命周期內(nèi)持久地存儲數(shù)據(jù)。
以下是對useRef的詳細(xì)解釋：

1、定義與功能

• 定義：useRef是一個React Hook，它返回一個可變的ref對象，其.current屬性被初始化為傳遞給useRef的參數(shù)（在組件的整個生命周期內(nèi)保持不變）。
• 功能：useRef主要用于兩個場景：訪問DOM元素和保存跨渲染周期的變量。

2、使用場景

1. 訪問DOM元素：

   • 當(dāng)需要直接訪問DOM元素（如設(shè)置焦點(diǎn)、測量尺寸等）時，可以使用useRef。
   • 通過將ref對象傳遞給元素的ref屬性，可以在組件中通過ref.current訪問該元素。

2. 保存跨渲染周期的變量：

   • useRef返回的ref對象在組件的整個生命周期內(nèi)保持不變，因此可以用于存儲不需要觸發(fā)組件重新渲染的變量。
   • 這使得useRef成為保存上一次渲染狀態(tài)、在自定義Hook中共享數(shù)據(jù)等場景的理想選擇。

3、示例

以下是一個使用useRef訪問DOM元素和保存跨渲染周期變量的示例：

import React, { useRef } from 'react';function AutoFocusInput() {// 創(chuàng)建一個ref對象用于訪問DOM元素const inputRef = useRef(null);// 處理按鈕點(diǎn)擊事件，使輸入框獲得焦點(diǎn)const handleButtonClick = () => {inputRef.current.focus();};// 創(chuàng)建一個ref對象用于保存跨渲染周期的變量const counterRef = useRef(0);// 增加計(jì)數(shù)器的值（不會觸發(fā)組件重新渲染）const incrementCounter = () => {counterRef.current += 1;};return (<div><input type="text" ref={inputRef} /><button onClick={handleButtonClick}>聚焦輸入框</button><p>計(jì)數(shù)器值：{counterRef.current}</p><button onClick={incrementCounter}>增加計(jì)數(shù)器</button></div>);
}export default AutoFocusInput;

在這個示例中，inputRef用于訪問輸入框DOM元素，并在按鈕點(diǎn)擊時使其獲得焦點(diǎn)。counterRef用于保存一個計(jì)數(shù)器變量，并通過按鈕點(diǎn)擊事件增加其值。由于useRef返回的ref對象在組件的整個生命周期內(nèi)保持不變，因此可以在多次渲染之間保持計(jì)數(shù)器的值。

4、注意事項(xiàng)

(1) 不要濫用useRef：雖然useRef可以在不觸發(fā)組件重新渲染的情況下存儲數(shù)據(jù)，但它不應(yīng)該被用作主要的狀態(tài)管理工具。對于需要響應(yīng)狀態(tài)變化的數(shù)據(jù)，應(yīng)該使用useState或useReducer等狀態(tài)管理Hook。
(2) 與class組件中的refs對比：在class組件中，refs是通過React.createRef()創(chuàng)建的，并在componentDidMount、componentDidUpdate等生命周期方法中訪問DOM元素。而在函數(shù)組件中，useRef提供了一種更簡潔的方式來創(chuàng)建和使用refs。

總之，useRef是React中一個非常有用的Hook，它提供了在組件的整個生命周期內(nèi)持久存儲數(shù)據(jù)的方法，而不會觸發(fā)組件的重新渲染。這使得它在訪問DOM元素和保存跨渲染周期變量等場景中非常有用。

總結(jié)

從變量的角度來看，React Hooks的本質(zhì)是自變量與因變量的關(guān)系。useState用于定義自變量，useMemo和useCallback用于定義無副作用的因變量，useEffect用于定義有副作用的因變量。為了方便操作更多的自變量，我們有了useReducer；為了跨組件層級操作自變量，我們有了useContext；最后，為了讓組件邏輯更靈活，我們有了useRef。

通過這些Hooks，我們可以在函數(shù)式組件中輕松實(shí)現(xiàn)復(fù)雜的邏輯和狀態(tài)管理，享受React帶來的高效和便捷。