React：useReducer钩子函数

说明

useReducer和useState的作用类似，用来管理相对复杂的状态数据。

https://zh-hans.react.dev/reference/react/useReducer

基础用法：
1）定义一个reduder函数，根据不同的action返回不同的新状态。
2）在组件中调用useReducer函数，并传入第1步定义的reducer函数，另外还要传状态的初始值。
3）事件发生时，通过dispatch函数分派一个action对象，它会通知reducer要返回哪个新状态并渲染UI。除了可以传递action类型，还可以传递参数。

示例

自增、自减操作

import { useReducer } from "react"

// 定义reducer函数：根据不同的action，返回不同的状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 在组件中调用useReducer(reducer, 初始状态),返回一个数组[state, dispatch]
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div>
      this is app
      {state}
      {/* // 调用dispatch({type: action类型})，作用：1）通知reducer返回一个新状态 2）使用这个新状态更新UI */}
      <button onClick={() => dispatch({ type: 'INC' })}>点击自增</button>
      <button onClick={() => dispatch({ type: 'DEC' })}>点击自减</button>
    </div >
  )
}

export default App

调用dispatch的时候除了传递action类型，还传递参数

import { useReducer } from "react"

// 定义reducer函数：根据不同的action，返回不同的状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'SET':
      return action.payload
    default:
      return state
  }
}

function App() {
  // 在组件中调用useReducer(reducer, 初始状态),返回一个数组[state, dispatch]
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <div>
      this is app
      {state}
      {/* // 调用dispatch({type: action类型})，作用：1）通知reducer返回一个新状态 2）使用这个新状态更新UI */}
      <button onClick={() => dispatch({ type: 'INC' })}>点击自增</button>
      <button onClick={() => dispatch({ type: 'DEC' })}>点击自减</button>
      <button onClick={() => dispatch({ type: 'SET', payload: 88 })}>点击更新</button>
    </div >
  )
}

export default App