react的hook之useReducer

import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react';
import ReactDOM from 'react-dom';



export function Three() {
  let initialState = 0;
  // 如果你希望初始状态是一个{number:0}
  // 可以在第三个参数中传递一个这样的函数 ()=>({number:initialState})
  // 这个函数是一个惰性初始化函数，可以用来进行复杂的计算，然后返回最终的 initialState


  const init = (initialState) => {
    return {
      number: initialState
    };
  }

  const reducer = (state, action) => {
    debugger
    switch (action.type) {
      case 'increment':
        return { number: state.number + 1 };
      case 'decrement':
        return { number: state.number - 1 };
      default:
        throw new Error();
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState, init);
  return (
    <>
      Count: {state.number}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  )

}

下面和上面一样，只是参数改了下形式，对比看下

import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react';
import ReactDOM from 'react-dom';



export function Three() {
  let initialState = { number: 0 };
  // 如果你希望初始状态是一个{number:0}
  // 可以在第三个参数中传递一个这样的函数 ()=>({number:initialState})
  // 这个函数是一个惰性初始化函数，可以用来进行复杂的计算，然后返回最终的 initialState



  const reducer = (state, action) => {
    //debugger
    switch (action.type) {
      case 'increment':
        return { number: state.number + 1 };
      case 'decrement':
        return { number: state.number - 1 };
      default:
        throw new Error();
    }
  };

  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.number}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  )

}

 总结：

第一个参数是(state, action) => newState 的 reducer，第二个参数是state的值

reducer里面的action就是底下dispatch的参数，state就是initialState的值

 有点类似于vue3.0的ref,reactive,一个是简单数据结构的state,一个是声明复杂数据结构的state

还可以参考https://www.jianshu.com/p/14e429e29798