位置: IT常识 - 正文
React中useReducer的理解与使用(react usereducer)
编辑：rootadminReact中useReducer的理解与使用 
本文链接地址:https://www.jiuchutong.com/zhishi/300187.html
转载请保留说明！
推荐整理分享React中useReducer的理解与使用(react usereducer)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react use,react use,react useref和createref,react useref和createref,react userouter,react useref和createref,react usereducer,react usereducer,内容如对您有帮助，希望把文章链接给更多的朋友！
这里以简单的语言描述一下useReducer的使用。也可自己查看官方文档（英文）
useReducer的使用场景： 当一个state需要维护多个数据且它们之间互相依赖。 这样业务代码中只需要通过dispatch来更新state，繁杂的逻辑都在reducer函数中了。
一、useReducerdemo：
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计算并返回新的statefunction 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> </> );}上一篇：【Node.js实战】一文带你开发博客项目（API 对接 MySQL）(node.js教程详细)
