1.简介
在hooks中,可以为函数式组件提供类似Redux的功能,类似于vuex都是提供状态管理的,官方提供两种state管理:useState,useReducer
使用场景:
1.如果说你的state是一个数组或者对象
2.如果你的state变化很复杂,经常一个操作需要修改很多state
3.如果你的应用比较大,希望UI和业务能够分开维护是时候
理解为阉割版的redux
2.代码案例
import React, { useReducer } from "react";
export default function App() {
// useReducer接收两个参数,第一个参数是reducer函数,第二个参数是初始值
// reducer函数接收两个参数,一个state,另外一个是action,然后返回一个state,dispatch
// state返回状态中的值,dispatch是一个可以发布事件来更新state的函数
const [state, dispatch] = useReducer((state, action) => {
if (action === "add") {
return state + 1;
} else if (action === "prep") {
return state - 1;
}
return state;
}, 0);
return (
<div>
<h2>{state}</h2>
<button onClick={() => dispatch("add")}>加1</button>
<button onClick={() => dispatch("prep")}>减1</button>
</div>
);
}
案例2:state为复杂对象时
import React, { useReducer } from "react";
export default function App() {
const initialState = { count: 0 };
function reducerFun(state, action) {
switch (action.type) {
case "add":
return { count: state.count + 1 };
case "prep":
return { count: state.count - 1 };
default:
throw Error();
}
}
const [state, dispatch] = useReducer(reducerFun, initialState);
return (
<div>
<h2>{state.count}</h2>
<button onClick={() => dispatch({ type: "add" })}>加1</button>
<button onClick={() => dispatch({ type: "prep" })}>减1</button>
</div>
);
}