前言
useReducer
实际上是 useState 的升级版,都是用来存储和更新 state,只是应用的场景不一样。
一般情况下,我们使用 useState
就足够项目需要了,不多当遇到以下场景时,使用useReducer 会更好些 。
- 状态逻辑复杂:当状态的更新逻辑比较复杂时,使用
useReducer
可以将这个逻辑封装在 reducer 函数中,使代码更加清晰易懂。 - 多组件共享状态:当多组件需要共享一个状态时,可以将这个状态放在父组件,然后通过
useReducer
将状态和更新函数传递给子组件,从而实现状态共享。 - 需要处理连续的多个状态更新:当需要连续处理多个状态更新时,使用
useReducer
可以帮助我们更好地管理状态的变化和更新。
1. useReducer 参数
接收 3 个参数:
- reducer 函数:(state, action)=> newState
在使用 useReducer 时,我们需要先定义一个 reducer 函数,这个函数接收 2个参数
state
:是当前最新的状态值
action
:用于告诉 reducer
当前执行的操作,reducer 会根据不同的操作执行不同的逻辑,从而更新不同的 state
newState
:返回值,返回一个新的state
reducer 是一个纯函数,没有任何 UI 和 副作用。
- initState
这个没什么好说的,是指初始的state
- init :是一个函数,
(inState)=> initialState
这个参数是可选
的,是一个函数,参数是初始的state。如果传入了这个参数,那么 初始state
就是 init(initState) 的返回结果
2. useReducer 返回值
返回的是一个数组
//
const [state, dispatch] = useReducer(reducer, initState, getInitData);
state
:当前的statedispatch
:是一个函数,(action) => void
通过调用 dispatch
传入 action
,来告诉 reducer
应该执行什么操作,然后更新 state
比如:
dispatch({
type: 'ADD', playod: 'xxx'})
举一个简单的例子:
import {
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' })}>Increment</button>
<button onClick={
() => dispatch({
type: 'decrement' })}>Decrement</button>
</div>
);
}
在上面的例子中,定义了一个 reducer
函数来管理状态的变化,它根据传入的 action
来执行不同的逻辑,返回新的状态。
在组件中,我们使用 useReducer
来初始化状态,并获取到一个 dispatch
函数来触发状态的更新。
点击按钮,会调用 dispatch
函数,并传入一个包含 type
属性的对象(即action)。这个对象用来表示将要进行的状态更新操作。
注意:
使用 useReducer
可以帮助我们更好的管理组件状态,使代码更易于维护和调试。不过,在一般情况下,使用 useState
可能会更加简单和高效,我们在日常开发中,需要根据实际情况进行评估。