React-hook-useReducer

1. useReducer 和 rudux区别

useReducer是useState的代替方案，用于state复杂变化

useReducer是单个组件状态管理，组件通讯还需要props

redux是全局的状态管理，多 组件共享数据

示例

import {useReducer} from "react";

const initState = {count:0}

const reduce = (state,action)=>{
    switch (action.type){
        case 'increment':
            return {count:state.count+1};
        case 'decrement':
            return {count:state.count-1};
        default:
            return {...state};

    }
}

function UseReduceDemo(){
    const [state,dispath] = useReducer(reduce,initState)
    return <div>
       count:{state.count}
        <button onClick={()=>dispath({type:'increment'})}>+</button>
        <button onClick={()=>dispath({type:'decrement'})}>-</button>
    </div>
}

export default UseReduceDemo