react hooks（React中useReducer的理解与使用）

这里以简单的语言描述一下useReducer的使用
  
  
  
  
  
  
  
。也可自己查看官方文档（英文）

useReducer的使用场景：

当一个state需要维护多个数据且它们之间互相依赖 
  
  
  
  
  
  
 。

这样业务代码中只需要通过dispatch来更新state
  
  
  
  
  
  
  
，繁杂的逻辑都在reducer函数中了 


 


 


 


 


 


 


 。

一
  
  
  
  
  
  
  
、useReducer

demo：

function reducer(state, action){ //... } const [state, dispatch] = useReducer(reducer, { name: "qingying", age: 18 }); 1. useReducer

主要作用就是更新state
 
 
 
 
 
 
 
。

参数：

第一个是 reducer 函数 
  
  
  
  
  
  
 ，这个函数返回一个新的state  
   
   
   
   
   
   
 。

后面再详述该函数的使用 

 

 

 

 

 

 

 。 第二个是 state 初始值

 

 

 

 

 

 

 
。

返回值：

当前 state              。（可以在业务代码中获取 
  
  
  
  
  
  
 、操作的就是它 
 

 
 

 
 

 
 

 
 

 
 

 
 

 。） dispatch 函数 


 


 


 


 


 


 


 ，纯函数
 
 
 
 
 
 
 
，用来更新state  
   
   
   
   
   
   
 ，并会触发re-render














。

（通俗地说 

 

 

 

 

 

 

 ，dispatch就是重新操作state的

 

 

 

 

 

 

 
，会让组件重新渲染） 2. reducer函数

作用：处理传入的state              ，并返回新的state                     。

参数：

接受当前 state 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。 接受一个action 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，它是 dispatch 传入的





















。

返回值：

新的state              。

3. dispatch函数

发送一个对象给reducer














，即action 
 
  
 
  
 
  
 
  
 
  
 
  
 
  。

参数：

一个对象













。

返回值： 无
  
  
  
  
  
  
  
。

完整代码：

import { useReducer } from "react"; /* 当state需要维护多个数据且它们互相依赖时                     ，推荐使用useReducer 组件内部只是写dispatch({...}) 处理逻辑的在useReducer函数中 
  
  
  
  
  
  
 。获取action传过来的值 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，进行逻辑操作 */ // reducer计算并返回新的state function reducer(state, action) { const { type, nextName } = action; switch (type) { case "ADD": return { ...state, age: state.age + 1 }; case "NAME": return { ...state, name: nextName }; } throw Error("Unknown action: " + action.type); } export default function ReducerTest() { const [state, dispatch] = useReducer(reducer, { name: "qingying", age: 12 }); function handleInputChange(e) { dispatch({ type: "NAME", nextName: e.target.value }); } function handleAdd() { dispatch({ type: "ADD" }); } const { name, age } = state; return ( <> <input value={name} onChange={handleInputChange} /> <br /> <button onClick={handleAdd}>添加1</button> <p> Hello,{name}, your age is {age} </p> </> ); }