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

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

完整示例：