React組件useReducer的講解與使用

更新時間：2023年04月20日 11:23:19 作者：亦世凡華、

在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會給我們返回兩個東西state和setState()。

useReducer的使用

在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會給我們返回兩個東西state和setState()。state用來讀取數(shù)據(jù)，而setState()用來設置修改數(shù)據(jù)，但這種方法也存在著一些不足，因為所有的修改state方式都必須通過setState()來進行，如果遇到一些復雜度比較高的state時，這種方式就變得有些繁瑣了。

為了解決復雜state帶來的不便，React為我們提供了一個新的使用state方式，當你的state過于復雜時，你就可以使用對state整合的工具 “Reducer” ，其作用就是將那些和同一個state相關的所有函數(shù)都整合到一起，方便在組件中進行調用。

注意：Reducer只適合那些比較復雜的state，對于簡單的state使用Reducer只能是徒增煩惱，以下都會用簡單的例子來說明Reducer的使用。

刨析useReducer參數(shù)

useReducer實際上算是useState的升級版，雖然使用比useState復雜，但其能夠應付更加繁瑣的應用場景，其接收的參數(shù)有三個，接下來將詳細刨析useReducer這個Hooks的使用，Reducer和State相同也是一個鉤子函數(shù)，其語法格式如下：

const [state, dispatch] = useReducer(reducer, initialArg, init?)

數(shù)組中第一個參數(shù)：用來獲取state的值；數(shù)組中第二個參數(shù)：state修改的派發(fā)器，通過派發(fā)器可以發(fā)送操作state的命令，具體的修改行為將會由另外一個函數(shù)執(zhí)行。

reducer參數(shù)：用于指定如何更新狀態(tài)。它必須函數(shù)，應該將狀態(tài)數(shù)據(jù)和操作方法作為參數(shù)，并且應該返回下一個狀態(tài)。狀態(tài)和動作可以是任何類型。即：(state,action) => newState

state：是當前最新的狀態(tài)值

action：用于告訴reducer當前執(zhí)行的操作，reducer會根據(jù)不同的操作執(zhí)行不同的邏輯

newState：返回值，返回一個新的state

initialArg參數(shù)：用于計算初始狀態(tài)的值，即為state的初始值，作用和useState()中的值是一樣的，它可以是任何類型的值。如何從中計算初始狀態(tài)取決于下一個init參數(shù)。

init參數(shù)：可選參數(shù)，本質上是一個函數(shù)，參數(shù)是初始的state，如果傳入這個參數(shù)的話，那么初始state就是init(initState)的返回結果。通俗來講就是：應該返回初始狀態(tài)的初始值設定項函數(shù)。如果未指定，則初始狀態(tài)設置為initialArg。否則，初始狀態(tài)被設置為調用init（initialArg）的結果。

useReducer的使用

在官方文檔案例中，已經很明確的告訴我們如何使用useReducer，如下：

官方文通過將reducer函數(shù)抽離出來去管理狀態(tài)的變化，根據(jù)傳入action的不同返回新的狀態(tài)，我們在點擊按鈕時會調用dispatch函數(shù)，并傳入一個包含type屬性的對象即action，這個對象表示將要進行的狀態(tài)更新操作。

接下來舉一個簡單的計數(shù)器的案例，來比較一下使用Reducer和未使用的區(qū)別在哪里。

傳統(tǒng)操作State的方法為：

import React,{ useState } from 'react'
const App = () => {
  const [num,setNum] = useState(0)
  const addHandler = () =>{ 
    setNum(prenum => prenum + 1)
  }
  const subHandler = () =>{ 
    setNum(prenum => prenum -1)
  }
  return (
    <div style={{fontSize:'30px',padding:'50px'}}>
      <button onClick={addHandler}>加1</button>
      {num}
      <button onClick={subHandler}>減1</button>
    </div>
  )
}
export default App

使用Reducer操作state方法為：

import React,{ useReducer } from 'react'
const App = () => {
  // reducer函數(shù) state:當前最新狀態(tài)值、action:當前執(zhí)行的操作
  const reducer = (state,action) =>{ 
    switch(action.type){
      case 'ADD':
        return state + 1
      case 'SUB':
        return state - 1
      default:
        return state
    }
  }
  const [num,numDispatch] = useReducer(reducer,0)
  const addHandler = () =>{ 
    numDispatch({type:'ADD'})
  }
  const subHandler = () =>{ 
    numDispatch({type:'SUB'})
  }
  return ( 
    <div style={{fontSize:'30px',padding:'50px'}}>
      <button onClick={addHandler}>加1</button>
      {num}
      <button onClick={subHandler}>減1</button>
    </div>
  )
}
export default App

當然如果是非常簡單的state，使用useState是明智的選擇，但在某些場景下，例如 state 邏輯較復雜且包含多個子值，或者下一個 state 依賴于之前的 state 等。useReducer會更加適用，使用 useReducer 還能給那些會觸發(fā)深更新的組件做性能優(yōu)化，因為你可以向子組件傳遞 dispatch 而不是回調函數(shù) 。如下：

import { useReducer } from 'react';
 
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
    default:
      return null
  }
}
 
const initialState = { name: 'Taylor', age: 42 };
 
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
 
  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }
 
  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    }); 
  }
 
  return (
    <>
      <input
        value={state.name}
        onChange={handleInputChange}
      />
      <button onClick={handleButtonClick}>
        +1
      </button>
      <p>Hello, {state.name}. You are {state.age} years old</p>
    </>
  );
}