快捷導(dǎo)航

React組件useReducer的講解與使用

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

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

useReducer的使用

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

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

注意：Reducer只適合那些比較復(fù)雜的state，對(duì)于簡(jiǎn)單的state使用Reducer只能是徒增煩惱，以下都會(huì)用簡(jiǎn)單的例子來說明Reducer的使用。

刨析useReducer參數(shù)

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

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

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

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

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

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

newState：返回值，返回一個(gè)新的state

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

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

useReducer的使用

在官方文檔案例中，已經(jīng)很明確的告訴我們?nèi)绾问褂胾seReducer，如下：

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

接下來舉一個(gè)簡(jiǎn)單的計(jì)數(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:當(dāng)前最新狀態(tài)值、action:當(dāng)前執(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

當(dāng)然如果是非常簡(jiǎn)單的state，使用useState是明智的選擇，但在某些場(chǎng)景下，例如 state 邏輯較復(fù)雜且包含多個(gè)子值，或者下一個(gè) state 依賴于之前的 state 等。useReducer會(huì)更加適用，使用 useReducer 還能給那些會(huì)觸發(fā)深更新的組件做性能優(yōu)化，因?yàn)槟憧梢韵蜃咏M件傳遞 dispatch 而不是回調(diào)函數(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>
    </>
  );
}