React中useReducer的理解与使用
Posted 清颖~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
</>
);
以上是关于React中useReducer的理解与使用的主要内容,如果未能解决你的问题,请参考以下文章