useReducer

作用：它在每次重新渲染的時(shí)候能夠緩存計(jì)算的結(jié)果

import { useReducer } from 'react'

// 1. 定義reducer函數(shù)，根據(jù)不同的action返回不同的新狀態(tài)
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 調(diào)用dispatch函數(shù)傳入action對象 觸發(fā)reducer函數(shù)，分派action操作，使用新狀態(tài)更新視圖 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
    </>
  )
}

export default App

01.png

分派action傳參

做法：分派action時(shí)如果想要傳遞參數(shù)，需要在action對象中添加一個(gè)payload參數(shù)，放置狀態(tài)參數(shù)

// 定義reducer

import { useReducer } from 'react'

// 1. 根據(jù)不同的action返回不同的新狀態(tài)
function reducer(state, action) {
  console.log('reducer執(zhí)行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 調(diào)用dispatch函數(shù)傳入action對象 觸發(fā)reducer函數(shù)，分派action操作，使用新狀態(tài)更新視圖 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}

export default App

image.png