前言

useReducer 實(shí)際上是 useState 的升級版，都是用來存儲和更新 state，只是應(yīng)用的場景不一樣。

一般情況下，我們使用 useState 就足夠項(xiàng)目需要了，不多當(dāng)遇到以下場景時(shí)，使用useReducer 會更好些 。

• 狀態(tài)邏輯復(fù)雜：當(dāng)狀態(tài)的更新邏輯比較復(fù)雜時(shí)，使用 useReducer 可以將這個(gè)邏輯封裝在 reducer 函數(shù)中，使代碼更加清晰易懂。
• 多組件共享狀態(tài)：當(dāng)多組件需要共享一個(gè)狀態(tài)時(shí)，可以將這個(gè)狀態(tài)放在父組件，然后通過 useReducer 將狀態(tài)和更新函數(shù)傳遞給子組件，從而實(shí)現(xiàn)狀態(tài)共享。
• 需要處理連續(xù)的多個(gè)狀態(tài)更新：當(dāng)需要連續(xù)處理多個(gè)狀態(tài)更新時(shí)，使用 useReducer 可以幫助我們更好地管理狀態(tài)的變化和更新。

1.useReducer 參數(shù)

接收 3 個(gè)參數(shù)：

• reducer 函數(shù)：（state, action）=> newState

在使用 useReducer 時(shí)，我們需要先定義一個(gè) reducer 函數(shù)，這個(gè)函數(shù)接收 2個(gè)參數(shù)

• state ：是當(dāng)前最新的狀態(tài)值
• action：用于告訴 reducer 當(dāng)前執(zhí)行的操作，reducer 會根據(jù)不同的操作執(zhí)行不同的邏輯，從而更新不同的 state
• newState：返回值，返回一個(gè)新的state

reducer 是一個(gè)純函數(shù)，沒有任何 UI 和 副作用。

• initState

這個(gè)沒什么好說的，是指初始的state

• init ：是一個(gè)函數(shù)，（inState）=> initialState

這個(gè)參數(shù)是可選的，是一個(gè)函數(shù)，參數(shù)是初始的state。

如果傳入了這個(gè)參數(shù)，那么 初始state 就是 init(initState) 的返回結(jié)果

2.useReducer 返回值

返回的是一個(gè)數(shù)組

//
const [state, dispatch] = useReducer(reducer, initState, getInitData);

• state ：當(dāng)前的state
• dispatch：是一個(gè)函數(shù)，(action) => void

通過調(diào)用 dispatch 傳入 action，來告訴 reducer 應(yīng)該執(zhí)行什么操作，然后更新 state

比如：

dispatch({type: 'ADD', playod: 'xxx'})

舉一個(gè)簡單的例子：

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

在上面的例子中，定義了一個(gè) reducer 函數(shù)來管理狀態(tài)的變化，它根據(jù)傳入的 action 來執(zhí)行不同的邏輯，返回新的狀態(tài)。

在組件中，我們使用 useReducer 來初始化狀態(tài)，并獲取到一個(gè) dispatch 函數(shù)來觸發(fā)狀態(tài)的更新。

點(diǎn)擊按鈕，會調(diào)用 dispatch 函數(shù)，并傳入一個(gè)包含 type 屬性的對象（即action）。這個(gè)對象用來表示將要進(jìn)行的狀態(tài)更新操作。

注意：

使用 useReducer 可以幫助我們更好的管理組件狀態(tài)，使代碼更易于維護(hù)和調(diào)試。

不過，在一般情況下，使用 useState 可能會更加簡單和高效，我們在日常開發(fā)中，需要根據(jù)實(shí)際情況進(jìn)行評估。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論