React 中的useReducer是個什麼東西

寫在前面

若是你想深刻學習React，藉助它解決本身遇到的各類業務場景，那麼你就須要瞭解useReducer。

結合我本身的學習心得和使用經驗，寫下這篇博客跟你們分享useReducer最簡單的知識點。

什麼是useReducer

useReducer是React推出的一個擴展Hook，以下代碼所示，它接受 (state, action) ⇒ newSatte的一個reduce，並返回當前的state以及與其配套的dispatch方法，讓開發人員可以更好的管理代碼中的數據，若是你熟悉Redux，那麼你對useReducer的工做原理就很是清楚了。

const [state, dispatch] = useReducer(reducer, initialState)
複製代碼

這裏簡單介紹以上面的幾個變量：

1. initialState：須要咱們本身定義，是咱們要管理的一個初始變量。能夠是一個數字，字符串，數組，對象等。
2. reducer：是咱們本身定義的一個純函數，它的做用就是經過定義好的邏輯來改變initialState初始變量，爲咱們的項目服務。
3. state：reduce裏面的邏輯處理數據以後，會返回一個最新的值，就是這個state
4. dispatch：觸發器，reducer中會定義不少條件，具體要使用哪個條件來改變initialState變量呢，就是要經過觸發器來控制。

總結起來一句話：咱們使用dispatch來觸發reducer純函數，用reducer純函數中的邏輯修改initialState，獲得一個新的變量，把這個變量賦值給state，最終返回。

從這一點看，useReducer和useState很是類似，以下代碼所示，咱們是這樣使用useState的：

const [userName, setUserName] = useState("Allen")
複製代碼

useState接受一個初始值"Allen"，返回一個最新值userName和修改這個最新值的方法setUserName。從這裏能夠看出，useState是對useReducer的封裝，useReducer是一種更原生的Hook，你能在使用useState的地方都替換成使用useReducer。後面咱們會給出useReducer的幾種使用場景。

爲何要使用useReducer

若是你是一個剛剛接觸React Hooks的程序員，你可能更加傾向於使用useState而不是useReducer，由於useState太好用了，組件中須要管理幾個變量，就是用幾個useState定義多少變量和方法就能夠了，這沒有什麼問題。可是不少有豐富經驗的程序員更加推薦你使用useReducer，理由以下：

1. 在須要管理大量數據的場景中，使用useReducer更加合適

在一些業務場景下使用useReducer更加合適，好比：一個組件中要收集用戶不少方面的信息，例如身高體重性別等基本信息，學歷專業特長等學校信息，公司職位工齡等單位信息等等。

若是你要爲這些信息都一一建立變量來保存，那就太繁瑣了。即便你使用一個或幾個對象來存儲，也仍是不夠清晰，這個時候使用useReducer就顯得很方便，這一點咱們在後面的實例中會給出，

2. 使用useReducer更加利於其餘程序員理解

大多數程序員對Redux比較熟悉，習慣於使用dispatch觸發action，而後獲取最新的state。這種狀況下，

他來閱讀useReducer會跟加駕輕就熟。可是若是讓他們去學習和掌握useState，顯然主要花費一些時間。

如何使用useReduce管理組件中的狀態

下面給出一個簡單的例子，來跟你們介紹如何使用Reducer管理組件中的狀態。

這是一個計數器，能夠自增，自減和重置，若是你有興趣，能夠直接到codesandbox中查看這個例子：codesandbox.io/s/react-use…

1. 首先咱們須要定義一個初始的變量

通常狀況下這個變量是一個對象，這裏的變量只有一個屬性amount，表示當前的數量：

const initState = {
    amount: 0
}
複製代碼

2. 而後咱們須要定義reducer

reducer就是一個純函數。這個純函數接受兩個參數，最終返回一個最新的狀態值。

這兩個參數分別是initstate和action。initstate是要管理的狀態值的初始狀態，action是一種命令，他告訴reducer要如何管理state狀態值。

返回的變量，咱們稱做是最新的狀態值。這裏定義的reducer代碼以下：

const reducer = (state, action) => {
  switch (action.type) {
    case "add":
      return {
        amount: state.amount + 1
      };
    case "minus":
      return {
        amount: state.amount - 1
      };
    case "reset":
      return {
        amount: 0
      };
    default:
      return {
        amount: 0
      };
  }
};
複製代碼

4. 使用useReducer來定義state和觸發reducer的方法

代碼以下：

const [state, dispatch] = useReducer(reducer, initState);
複製代碼

5. 使用dispatch觸發action，修改狀態

在實際使用的時候，咱們須要用dispatch觸發一個action，reducer根據action的種類進行操做，代碼以下：

<button onClick={() => { dispatch({ type: "add" }); }} >Add</button>

<button onClick={() => { dispatch({ type: "minus" });}}>minus</button>

<button onClick={() => { dispatch({ type: "reset" });}}>reset</button>
複製代碼

結合具體的使用示例，介紹如何使用useReducer，

以前看到一篇文章，對useReducer的使用場景作了很詳細的描述，這裏直接給出列出，有興趣的小夥伴能夠自行閱讀：

在 React Hooks 中使用 useReducer 的幾種用例：juejin.cn/post/684490…

寫在最後

以上就是本身的總結，有錯誤之處，還但願你們予以糾正。