如何使用 useReducer React Hook
了解 useReducer React Hook 的用途以及如何使用它！ 自從 React 引入了 hooks 以來，我在幾個專案中都使用過它們，它們真的很強大。 移除所有基於 class 的組件，讓代碼更像是真正的 JavaScript。而且函數組件終於可以管理狀態了。 如果你對 hooks 還不熟悉，請先看看我的React hooks介紹。 我有時會使用到的一個 Hook 是 useReducer。 import React, { useReducer } from 'react' 這個 Hook 用於管理狀態，類似於 useState，但更複雜。 這就是 useState 和 useReducer 的關鍵差異：使用 useReducer 時，通過傳遞消息來改變狀態，而不是直接調用狀態更新函數。 如果你知道 Redux 是如何工作的，這就基本上是一樣的。一個 reducer 是一個純函數，它根據先前的狀態和已分發的動作計算出下一個狀態。 (currentState, action) => newState “純函數” 是什麼意思？純函數接收輸入並返回輸出，而不會改變輸入或其他任何東西。這意味著 reducer 返回一個完全替換先前狀態的全新狀態。 一個 reducer 應該： 永遠不要改變其參數 永遠不要生成副作用（不要有任何改變狀態的 API 調用） 永遠不要調用非純函數，即根據與其輸入之外的因素改變其輸出的函數（例如 Date.now() 或 Math.random()） 雖然沒有強制要求，但你應該遵守這些規則。這樣做的好處是：reducer 更容易進行測試，因為它們沒有副作用。 這允許集中管理狀態，允許組件通過發送消息來修改狀態，還可以在組件中使用和更改較為複雜的狀態。 讓我們通過一個計數器組件來舉個例子。 useReducer 接受一個 reducer 函數和一個初始狀態值作為參數。在這個例子中，我們的狀態是一個整數，起始值為 0：...