本教程是React Hooks系统教程中的一部分。
结合useContext 实现 Redux 组件间共享状态管理
React Hooks 的 useReducer/useContext 已经基本可以实现类似 Redux 的状态管理。
useReducer 是 useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。机制与 Redux 类似。
基本用法
const [state, dispatch] = useReducer(reducer, initialArg, init);
在某些场景下,useReducer 会比 useState 更适用,例如 state 逻辑较复杂且包含多个子值,或者下一个 state 依赖于之前的 state 等。并且,使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数 。
useReducer 简单示例
下面这个示例,我们在一个对象中定义了两个计数器,通过传递不同的参数改变相应的值。当点击 :"Add IP" 时,countInfo中的 IP/PV 值都加1,当点击 "Add PV"时,只有 pv 值加1.
import React, { useReducer } from "react";
function CountReducer(state, action) {
switch (action) {
case "pv":
return { ...state, ip: state.pv+1 };
case "ip":
return { ...state, ip: state.ip+1, pv: state.pv+1 }
}
return state;
}
export function ExampleReducer() {
const [countInfo, dispatch] = useReducer(CountReducer, { ip:0, pv:0 });
return (
<div>
<hr />
<h1>useReducer: countInfo {JSON.stringify(countInfo)}</h1>
<button onClick={() => dispatch("ip")}>Add IP</button>
<button onClick={() => dispatch("pv")}>Add PV</button>
</div>
);
}
完整示例: