useReducer

• useReducer 接受的第一個(gè)參數(shù)是一個(gè)函數(shù)，我們可以認(rèn)為它就是一個(gè)reducer，reducer的參數(shù)就是常規(guī)reducer里面的state和action，返回改變后的state。
• useReducer 第二個(gè)參數(shù)為 state 的初始值。
• useReducer 返回一個(gè)數(shù)組，數(shù)組的第一項(xiàng)就是更新之后 state 的值 ，第二個(gè)參數(shù)是派發(fā)更新的 dispatch 函數(shù) 。dispatch 的觸發(fā)會(huì)觸發(fā)組件的更新，這里能夠促使組件從新的渲染的一個(gè)是 useState 派發(fā)更新函數(shù)，另一個(gè)就 useReducer 中的 dispatch。

// App.tsx
import React, { useReducer } from "react";
import App1 from './App1';

import './App.css';
function App() {

    /* number為更新后的state值,  dispatchNum 為當(dāng)前的派發(fā)函數(shù) */
    const [ num , dispatchNum ] = useReducer((state: number,action: { payload?: any; name: string; })=>{
      const { payload , name  } = action
      /* return的值為新的state */
      switch(name){
          case 'add':
              return state + 1
          case 'sub':
              return state - 1 
          case 'reset':
            return payload       
      }
      return state
  },0)

  return (
  <div className="App">
    當(dāng)前值：{ num }
    { /* 派發(fā)更新 */ }
    <button onClick={()=>dispatchNum({ name:'add' })} >增加</button>
    <button onClick={()=>dispatchNum({ name:'sub' })} >減少</button>
    <button onClick={()=>dispatchNum({ name:'reset' ,payload:666 })} >賦值</button>
    { /* 把dispatch 和 state 傳遞給子組件  */ }
    <App1  dispatch={ dispatchNum } State={{ num }} />
  </div>
  );
}

export default App;

// App1.tsx
import React, {  } from "react";
import './App.css';

function App1(porps:any) {
  console.log(porps)
  return (
    <div className="App">
        <h1>A1：{porps.State.num}</h1>
    </div>
  );
}

export default App1;