React Hooks 入门教程四:useReducer使用说明,改变对象中不同参数的值

react hooks JavaScript 前端 by ourjs on 1591959493625


本教程是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>
  );
}

完整示例


上一篇: React Hooks 入门教程三:useContext、createContext使用,父子组件传递状态数据 下一篇: React Hooks 入门教程五:useReducer结合useContext 实现 Redux 组件间共享状态管理,简单用户登录示例教程