useReducer的基本使用

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

react的hooks提供了两种state管理的hook：useState 和 useReducer

useState的语法很简单

useReducer这个语法也是很简单的，前提是你熟悉redux的reducer。

基本用法：

接受两个参数

import { useReducer } from 'react'

//初始化state
const initState = {
    count: 0
}

//定义一个reducer函数
function reducer(state, action) {
    switch(action.type) {
        case 'add': 
            return {...state, count: state.count + 1}
        case 'sub': 
            return {...state, count: state.count - 1}
        default:
            return state
    }
}

const TUseReducer = () => {
    const [state, dispatch] = useReducer(reducer, initState)
	//dispatch派发action，action是一个对象
    
    const add = () => {
        dispatch({type: 'add'})
    }
    const sub = () => {
        dispatch({type: 'sub'})
    }

    return (
        <div>
            Count: {state.count}
            <button onClick={add}>+</button>
            <button onClick={sub}>-</button>
        </div>
    )
}

接受三个参数：

import { useReducer } from 'react'

//初始化state
function init(initState) {
 	return {count: initState}   
}

//定义一个reducer函数
function reducer(state, action) {
}

const TUseReducer = ({initState}) => {
    const [state, dispatch] = useReducer(reducer, initState, init)
    //内部会执行 init(inistate)
}

这样的好处，就是初始值可以有外部环境提供

理论源码

let memoizedState;	
function useReducer(reducer, initialArg, init) {	
  let initState = void 0;	
   //就是判断是否存在第三个参数 
  if (typeof init !== 'undefined') {	
    initState = init(initialArg)	
  } else {	
    initState = initialArg	
  }	
  function dispatch(action) {	
    memoizedState = reducer(memoizedState, action)	
    render()	//dispatch触发render函数
  }	
  memoizedState = memoizedState || initState	
  return [memoizedState, dispatch]	
}	

useReducer的使用场景：

• 处理复杂逻辑的state及state间有依赖的

总结：

可能我不会用useReducer，我在开发中，确实不知道何时使用useReducer，太菜了吧