04.useReducer

244 阅读1分钟

useReducer有点类似于Redux的管理,第一个参数是Reducer函数,第二个参数是默认值返回值和修改值的方法

  import React, {useReducer} from 'react';
  
  function Comp1(){
    const [count,dispatch] = useReducer((state,action)=>{
      switch (action.type) {
        case 'add':
          return state+1;
        case 'sub':
          return state-1;
        default:
          return state;
      }
    },0)
  
    return (
      <div>
        <h2>当前的分数是{count}</h2>
        <button onClick={()=>{ dispatch({type:'add'}) }}>增加</button>
        <button onClick={()=>{ dispatch({type:'sub'}) }}>减少</button>
      </div>
    )
  }
  export default Comp1;