useReducer
大约 1 分钟约 374 字
useState
可以满足大部分状态管理的需求,有时你希望将状态逻辑与进行状态更改的组件分开。此外,如果你有多个状态元素通常会一起改变,那么有一个包含所有状态元素的对象可能很有帮助。这时使用 useReducer
是一个更好的选择。
import { useReducer } from 'react';
function reducer(state, action) {
// ...
}
function MyComponent() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
// ...
}
useReducer
接收一个 reducer
函数和一个初始状态,返回一个包含当前状态和 dispatch
函数的数组。
reducer
:指定数据如何更新,reducer
函数必须为纯函数,接收当前状态和 action 作为参数,并返回下一个状态。状态和 action 可以是任何类型。state
:当前状态action
:触发状态改变的 action
initialArg
:初始状态的值,可以是任何类型。初始状态的计算取决于下一个init
参数。optional init
:初始化函数,返回初始状态。如果未指定,则初始状态设置为initialArg
。否则,初始状态设置为init(initialArg)
的结果。
import { useReducer } from 'react';
function reducer(state, action) {
if (action.type === 'incremented_age') {
return {
age: state.age + 1
};
}
throw Error('Unknown action.');
}
export default function Counter() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
return (
<>
<button onClick={() => {
dispatch({ type: 'incremented_age' })
}}>
Increment age
</button>
<p>Hello! You are {state.age}.</p>
</>
);
}
useReducer
类似 useState
,但他可以将逻辑与组件分离,并且可以处理多个状态元素。