useReducer
-
useReducer 接受的第一个参数是一个函数，我们可以认为它就是一个reducer，reducer的参数就是常规reducer里面的state和action，返回改变后的state。
-
useReducer 第二个参数为 state 的初始值。
-
useReducer 返回一个数组，数组的第一项就是更新之后 state 的值 ，第二个参数是派发更新的 dispatch 函数 。dispatch 的触发会触发组件的更新，这里能够促使组件从新的渲染的一个是 useState 派发更新函数，另一个就 useReducer 中的 dispatch。
// App.tsx
import React, { useReducer } from "react";
import App1 from './App1';
import './App.css';
function App() {
/* number为更新后的state值, dispatchNum 为当前的派发函数 */
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">
当前值：{ num }
{ /* 派发更新 */ }
<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;
