useReducer与useState 的区别，分别的优势 和 缺点

让我们先来看一下代码：  这是  useReducer  与  useState 处理同一功能的区别 。 

我们可以看到，useReducer 可以增加代码的复用，让代码看起来更简洁 。  

比较useState而言，最大的优势就是增加了代码的复用性，可读性，但必须时，type有多种情况的时候，才会发挥useReducer的优势，否则，不如不用。

缺点是， type类型不多时，反而减少了了整个代码的可读性，简洁性。

一句概括： 是否使用useReducer ，取决于 type的类型数量

// type action = {    注意， action对象 有两个属性 
      type : 
      playload:             
}

const initialState = {
    score : 0
} 


const Reducer = (state = initialState, action) => {
    switch (action.type) {
        case: "increment"
            return { ...state , score : state.score + action.payload  }
         case: "decrement"
            return { ...state , score : state.score - action.payload  }
    }
}


const [ State , dispatch  ] = useReducer(Reducer,initialState)



<Button onClick={()=>{dispatch({type:"increment",payload:2})}>

<Button onClick={()=>{dispatch({type:"decrement",payload:2})}>

const [ State , setState ] = useState(reducer,initialState)

const increment = () => { 
    ( State )=>{ { ...State , score:State + 1  }  }
 }

const decrement = () => { 
    ( State )=>{ { ...State , score:State - 1  }  }
 }


<Button onClick={increment}>

<Button onClick={decrement}>

 我们可以看到，如果，用传统的useState，每次调用或者increment 方法，需要修改里面的 + - 号， 但如果后面还有 ×， ÷呢，不是需要写多很多代码？ 代码很长。 

所以，useReducer 是可有可无的。 

参考：

【react hooks】详解useReducer的用法_哔哩哔哩_bilibili