1 useState
2 useEffect
3 useContext
4 useReducer
文章目录
4 useReducer() action 钩子
useReducer
可用于提高应用性能,当更新逻辑比较复杂时,可以考虑使用useReducer。
任何有使用useState的地方,都可以替换成 useReducer。
4.1 创建初始值 initialState
const initialState = {
count: 0 }
4.2 创建 reducer 函数
reducer 有两个必不可少的形参,分别是传入的值与将要执行操作的类型。
在函数中整合了所有类型的操作。
const reducerName = (state, action) => {
switch (action.type){
case 'add'
return {
count: state.count + 1 }
case 'sub'
return {
count: state.count - 1 }
default:
break
}
}
4.3 使用 useReducer
使用 useReducer 需要传入两个参数,分别是reducer函数和初始值initialState。
返回一个数组,第一项state保存的是值,第二项是dispatch
const [state, dispatch] = useReducer(reducerName, initialState);
4.4 使用state 与 调用 dispatch
通过onClick事件调用dispatch,并传入一个有操作类型的对象。
return (<>
<p>count值:{
state.count}</p>
<button onClick={
() => dispatch({
type: 'add' })}>加1</button>
<button onClick={
() => dispatch({
type: 'sub' })}>减1</button>
</>)
4.5 完整示例:
import React, {
useReducer } from 'react';
const initialState = {
count: 0 }// 初始参数
const reducerName = (state, action) => {
// 创建 reduce 函数
switch (action.type){
case 'add'
return {
count: state.count + 1 }
case 'sub'
return {
count: state.count - 1 }
default:
break
}
}
const Test = () => {
const [state, dispatch] = useReducer(reducerName,initialState);
return (<>
<p>count值:{
state.count}</p>
<button onClick={
() => dispatch({
type: 'add' })}>加1</button>
<button onClick={
() => dispatch({
type: 'sub' })}>减1</button>
</>)
}