前言

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()函数的执行。