React-Hooks----useReducer()

前言

useReducer()是React提供的一种状态管理工具，与useState()类似，但更适合处理复杂的状态逻辑。

用法

useReducer()接受两个参数：reducer函数和初始状态。
reducer函数接受两个参数：当前状态和要进行的操作，返回一个新的状态。

例如，假设我们有一个计数器组件，使用useReducer()来管理计数器的状态：

import React, {
    
     useReducer } from 'react';

function reducer(state, action) {
    
    
  switch (action.type) {
    
    
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}

function Counter() {
    
    
  const [count, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <p>Count: {
    
    count}</p>
      <button onClick={
    
    () => dispatch({
    
     type: 'increment' })}>+</button>
      <button onClick={
    
    () => dispatch({
    
     type: 'decrement' })}>-</button>
    </div>
  );
}

在这个例子中，我们定义了一个reducer()函数，它根据action.type的不同来执行不同的操作，返回一个新的状态。

我们将这个函数和初始状态（0）传递给useReducer()，它返回一个count状态和一个dispatch函数。
dispatch()函数可以接受一个包含type属性的对象，用来触发reducer()函数执行，返回一个新的状态。
最后，我们在组件中使用count状态来渲染计数器，并在按钮上使用dispatch()函数来触发reducer()函数的执行。