前言
useReducer 是 React 中的一个 Hooks，用于处理复杂的状态逻辑。它允许您管理本地组件状态，将复杂的状态管理逻辑分解成可维护的部分，类似于 Redux 的 reducer。以下是关于 useReducer 的简介：
useReducer 的工作方式类似于传统的 React 类组件中的 this.setState，但更适用于处理复杂状态和操作。它接受两个参数：reducer 函数和初始状态。
- reducer 函数：这是一个纯函数，接受当前状态和一个操作（action），并返回新状态。它用于定义如何根据操作来更新状态。例如，当用户点击按钮时，您可以派发一个操作（action），然后 reducer 函数根据操作来计算新的状态。
- 初始状态：这是状态的初始值，通常是一个对象，表示组件的初始状态。
useReducer 返回一个包含当前状态和 dispatch 函数的数组。dispatch 函数用于触发操作，并传递给 reducer 函数。当您调用 dispatch 时，它会引发状态的更新，然后触发组件的重新渲染。
与 useState 不同，useReducer 更适合处理复杂的状态逻辑，例如表单验证、多步骤操作或需要依赖先前状态的更新。它使状态管理更加可预测和可维护，因为所有状态更新的逻辑都集中在 reducer 函数中。
总之，useReducer 是 React 中的一个强大 Hooks，适用于管理复杂的组件状态和操作。它能够使状态逻辑更清晰、更可控，有助于编写更健壮的组件。
useReducer Hook 概述
- 从名称来看, 很多人会误以为 useReducer 是用来替代 Redux 的, 但是其实不是
- useReducer 是 useState 的一种替代方案, 可以让我们很好的复用操作数据的逻辑代码
首先来用一个案例来带出 useReducer 的使用，案例大致内容为，分别定义了不同的组件然后在各个组件当中编写，自增自减的业务如下：
import React, {useState} from 'react'; function Home() { const [numState, setNumState] = useState(0); function increment() { setNumState(numState + 1); } function decrement() { setNumState(numState - 1); } return ( <div> <p>{numState}</p> <button onClick={() => { increment() }}>增加 </button> <button onClick={() => { decrement() }}>减少 </button> </div> ) } function About() { const [numState, setNumState] = useState(0); function increment() { setNumState(numState + 1); } function decrement() { setNumState(numState - 1); } return ( <div> <p>{numState}</p> <button onClick={() => { increment() }}>增加 </button> <button onClick={() => { decrement() }}>减少 </button> </div> ) } export default function App() { return ( <div> <Home/> <About/> </div> ) }
注意点:
- 不同组件中的 useState 保存的状态是相互独立的, 是相互不影响的
通过对如上示例的观察可以发现，出现了需要重复的业务逻辑代码，那么在我们使用了 useReducer 之后就会发现大大的优化了。
useReducer 接收的参数：
- 第一个参数: 处理数据的函数
- 第二个参数: 保存的默认值
useReducer 返回值，会返回一个数组, 这个数组中有两个元素：
- 第一个元素: 保存的数据
- 第二个元素: dispatch 函数
import React, {useReducer} from 'react'; function reducer(state, action) { switch (action.type) { case 'ADD': return {...state, num: state.num + 1}; case 'SUB': return {...state, num: state.num - 1}; default: return state; } } function Home() { const [state, dispatch] = useReducer(reducer, {num: 0}); return ( <div> <p>{state.num}</p> <button onClick={() => { dispatch({type: 'ADD'}) }}>增加 </button> <button onClick={() => { dispatch({type: 'SUB'}) }}>减少 </button> </div> ) } function About() { const [state, dispatch] = useReducer(reducer, {num: 0}); return ( <div> <p>{state.num}</p> <button onClick={() => { dispatch({type: 'ADD'}) }}>增加 </button> <button onClick={() => { dispatch({type: 'SUB'}) }}>减少 </button> </div> ) } export default function App() { return ( <div> <Home/> <About/> </div> ) }
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
