zwvista

鉤子函數(shù) useState useEffect useReducer useRef useMemo

函數(shù)型組件，鉤子函數(shù)

React 最新的趨勢是使用函數(shù)型組件來代替類組件。
與類組件相比，函數(shù)型組件缺少狀態(tài)，生命周期等必要的元素。
React 通過引入鉤子函數(shù)來解決這些問題。

useState

在函數(shù)型組件中定義狀態(tài)值需要使用 useState 鉤子函數(shù)。
改變組件的狀態(tài)值會觸發(fā)組件的更新，即組件會被重新渲染。
useState 函數(shù)的參數(shù)為該狀態(tài)值的初值。
useState 函數(shù)的返回值中可以提取該狀態(tài)值的 getter 和 setter。

const [count, setCount] = useState(0);

這里定義一個狀態(tài)，初值為 0。
getter 為 count，類型為 int，可以提取當(dāng)前狀態(tài)值。
setter 為 setCount。可以設(shè)置狀態(tài)的值。
setCount 的參數(shù)可以是 int，用于同步更新，也可以是一個回調(diào)函數(shù)，用于異步更新。

count
setCount(count + 1);
setCount(n => n + 1);

useEffect

在函數(shù)型組件中執(zhí)行副作用需要使用 useEffect 鉤子函數(shù)。
useEffect 大致有三種功能。

1. 組件更新后觸發(fā)副作用
2. 在組件再次更新或卸載之前執(zhí)行對副作用的清理操作
3. 通過監(jiān)聽某些依賴項來控制副作用和清理操作被執(zhí)行的時機(jī)

useEffect 有兩個參數(shù)。
useEffect 的第一個參數(shù)為回調(diào)函數(shù)，可以在其中定義需要觸發(fā)的副作用。
useEffect 的回調(diào)函數(shù)參數(shù)如果有返回值，可以返回一個回調(diào)函數(shù)，在其中定義需要執(zhí)行的清理操作。
useEffect 的第二個參數(shù)為需要監(jiān)聽的依賴項數(shù)組。這里的依賴項是指組件的狀態(tài)值。
useEffect 的第二個參數(shù)不存在時，組件每次更新后都會觸發(fā)副作用，在組件再次更新或卸載之前都會執(zhí)行清理操作。
useEffect 的第二個參數(shù)為空數(shù)組時，只有在組件初始化后才會觸發(fā)副作用，只有在組件卸載之前才會執(zhí)行清理操作。
useEffect 的第二個參數(shù)為包含某些依賴項的非空數(shù)組時，只有這些依賴項的值發(fā)生變化后組件才會執(zhí)行副作用和清理操作。這里變化的依據(jù)是引用相等性。
useEffect 所定義的回調(diào)函數(shù)和清理操作至少會被執(zhí)行一次。

// 依賴項數(shù)組不存在，每次組件更新都會觸發(fā)副作用
useEffect(() => {
  // 副作用
});

// 依賴項數(shù)組為空，組件初始化后執(zhí)行副作用，組件卸載前執(zhí)行清理操作
useEffect(() => {
  // 副作用
  const id = setInterval(callback, 1000);
  return () => {
    // 清理操作
    clearInterval(id);
  };
}, []);

// 依賴項數(shù)組不為空，只有當(dāng)其中的對象發(fā)生變化時才會觸發(fā)副作用
useEffect(() => {
  // 副作用
}, [a, b, c]);

useReducer

useReducer 鉤子函數(shù)是 useState 的增強版，該函數(shù)為狀態(tài)值的管理提供了更強的控制能力。
useReducer 有兩個參數(shù)，reducer 回調(diào)函數(shù)和狀態(tài)的初始值。
reducer 回調(diào)函數(shù)有兩個參數(shù)，分別是當(dāng)前的狀態(tài)值和 action 參數(shù)。
reducer 回調(diào)函數(shù)的 action 參數(shù)可以不存在，可以是指定操作類型的字符串，也可以是包含操作類型和操作負(fù)載的復(fù)雜對象。
reducer 回調(diào)函數(shù)依據(jù) action 參數(shù)的值執(zhí)行相應(yīng)的操作并返回新的狀態(tài)值。
useReducer 函數(shù)的返回值中可以提取該狀態(tài)值的 getter 和 dispatch。
狀態(tài)值的 dispatch 函數(shù)帶有一個 action 參數(shù)。
通過調(diào)用 dispatch 函數(shù)可以將當(dāng)前狀態(tài)值以及 action 參數(shù)傳遞給 reducer 回調(diào)函數(shù)，執(zhí)行相應(yīng)的操作并用返回值來更新狀態(tài)值。

// action 參數(shù)不存在
const [state, dispatch] = useReducer(x => x + 1, 0);
// dispatch 函數(shù)被調(diào)用，state 無條件遞增
dispatch(); // state = 1

const [, forceUpdate] = useReducer(x => x + 1, 0);
// forceUpdate 函數(shù)被調(diào)用，由于不知名狀態(tài)值被更新，組件被強制更新
forceUpdate();

// action 參數(shù)是簡單的操作類型
const reducer = (state, action) => {
  if (action === '++') return state + 1;
  if (action === '--') return state - 1;
  return state;
}
const [state, dispatch] = useReducer(reducer, 0);

// dispatch 函數(shù)被調(diào)用，根據(jù)操作類型 state 遞增或遞減
dispatch('++'); // state = 1
dispatch('--'); // state = 0

// action 參數(shù)是個對象，內(nèi)含操作類型和操作負(fù)載（操作所涉及的參數(shù)）
const reducer = (state, action) => {
  if (action.type === '+') return state + action.payload;
  if (action.type === '-') return state - action.payload;
  return state;
}
const [state, dispatch] = useReducer(reducer, 0);

// dispatch 函數(shù)被調(diào)用，根據(jù)操作類型 state 增加或減少操作負(fù)載所對應(yīng)的數(shù)值
dispatch({type: '+', payload: 2}); // state = 2
dispatch({type: '-', payload: 3}); // state = -1

useRef

useRef 鉤子函數(shù)用于引用一個不參與組件渲染的值。
useRef 函數(shù)的參數(shù)為引用的初始值。
useRef 函數(shù)返回所創(chuàng)建的引用，該引用有一個 current 字段，用于讀取或設(shè)置引用的當(dāng)前值。
useRef 所創(chuàng)建的引用可以在組件的多次渲染期間保持當(dāng)前值不變。
改變引用的當(dāng)前值不會觸發(fā)組件的更新。

// ref 引用不參與組件的渲染
const ref = useRef(0); // ref.current = 0
// 改變 ref 引用的值不會觸發(fā)組件的更新
ref.current++; // ref.current = 1

useRef 函數(shù)可以用于獲取 DOM 元素的引用

// inputRef 用于保存輸入框組件的引用
const inputRef = useRef(null);
// 將輸入框的背景色設(shè)置為黃色
inputRef.current.style.background = "yellow"
// 獲取輸入框組件的引用
<input type="text" ref={inputRef} />

useRef 函數(shù)所創(chuàng)建的引用可用于存放 timer interval 的 id

useMemo

在多次渲染期間緩存計算結(jié)果可以使用 useMemo 鉤子函數(shù)。
useMemo 可用于計算屬性，也可用于防止某些耗時較長的操作反復(fù)執(zhí)行。
useMemo 有兩個參數(shù)。
useMemo 的第一個參數(shù)是用于計算的 calculate 回調(diào)函數(shù)。
calculate 回調(diào)函數(shù)沒有參數(shù)，函數(shù)體內(nèi)計算并返回需要緩存的值。
useMemo 的第二個參數(shù)是需要監(jiān)聽的依賴項數(shù)組。這里的依賴項是指組件的狀態(tài)值。
首次計算或者依賴項數(shù)組中的依賴項發(fā)生變化時 useMemo 返回計算結(jié)果。
依賴項數(shù)組沒有變化時 useMemo 返回之前緩存的值。

const result = useMemo(() => slowFunction(), []);

const result = useMemo(() => cal(count), [count]);