react hook 系列-useReducer

useReducer
1 useState 的替代方案，useState是一个语法糖 ，是useReducer的语法糖
2 在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state

import React, { useReducer } from "react";

const ADD = "ADD";
const MINUS = "MINUS";

function reducer(state, action) {
 switch (action.type) {
   case ADD:
     return { number: state.number + 1 };
   case MINUS:
     return { number: state.number - 1 };
   default:
     return state;
 }
}
function initializer(initialArgs) {
 return { number: initialArgs };
}

function Counter() {
 //state={number:0}
 let [state, dispatch] = useReducer(reducer, 0, initializer);
 return (
   <div>
     <p>{state.number}</p>
     <button onClick={() => dispatch({ type: ADD })}>+</button>
     <button onClick={() => dispatch({ type: MINUS })}>-</button>
   </div>
 );
}

export default Counter;