React 语法扩展

useReducer钩子函数

不同action类型返回不同处理行为

useState()函数返回解构为两个值 state当前状态 dispatch修改状态函数

dispatch()函数参数为一个actuon对象 如 ：

样例：

import { useReducer } from 'react';
import './App.css';

// 定义一个Reducer函数 根据不同的action进行不同的状态修改 

function reducer(state,action){
  switch(action.type){
    case `INC`:
      return state+1
    case `DEC`:
      return state-1 
    default:
      return state


  }
}

// 调用useReducer函数将reducer函数作为参数并设定初始状态

function App() {
  const [state,dispatch] = useReducer(reducer,0)

  return (
    <div className="App">
     {state}
    <button onClick={()=>{dispatch({type:`INC`})}}>+</button>
    <button onClick={()=>{dispatch({type:`DEC`})}}>-</button>

    </div>
  );
}

export default App;

额外传递参数 、

import { useReducer } from 'react';
import './App.css';

// 定义一个Reducer函数 根据不同的action进行不同的状态修改 

function reducer(state,action){
  switch(action.type){
    case `INC`:
      return state+1
    case `DEC`:
      return state-1 
    case `SET`:
      return action.payload
    default:
      return state


  }
}

// 调用useReducer函数将reducer函数作为参数并设定初始状态

function App() {
  const [state,dispatch] = useReducer(reducer,0)

  return (
    <div className="App">
     {state}
    <button onClick={()=>{dispatch({type:`INC`})}}>+</button>
    <button onClick={()=>{dispatch({type:`DEC`})}}>-</button>
    <button onClick={()=>{dispatch({type:`SET`,payload:9527})}}>更新</button>
    
    </div>
  );
}

export default App;

流程

1.dispatch函数接收到action对象，根据不同的action对象触发reduce函数
2.reducer管理的state变化，重新渲染ui