为什么要使用useReducer
发布时间
阅读量：
阅读量
useState
在某些应用场景中，在使用 useState 更新数据的时候会发现体验并不如预期理想【整体来说存在一定的延时现象
在重新执行setUser操作时, 用户变量未能及时更新并被加载到组件中. 根本原因在于, 在进行更新操作时仅修改了对象的某个属性, 并且在调用setUser()方法时采用了\texttt{setUser(_user)}的方式而非采用包含所有字段的新对象形式\{\dots\_user\}。
setUser(_user)两者均可实现更新user变量的功能。然而，在监听数据变化时，默认认为user变量未发生变化而导致组件未能及时更新，从而产生数据更新延迟的问题。
类似数据双向绑定
当我们采用对象解包方式来进行赋值操作时
useReducer
useReducer是useState的一个替代方案。
在某些情况下, useReducer 比 useState 更适合应用, 特别是在 state 的逻辑较为繁琐且包含多个子值时, 或者下一个 state 受前一状态的影响较多等情况. 此外, 使用 useReducer 还能为那些会触发深层更新的组件带来性能上的提升.
看起来，有点像redux的reducer的用法了。
import { useState, useReducer } from "react"
import './App.css';
function reducer(state, action) {
switch (action.type) {
case 'change':
return { ...state, name: action.params.name }
default: throw new Error();
}
}
function App() {
const initialState = { id: "", name: "duxin", age: "18" };
const [state, dispatch] = useReducer(reducer, initialState);
const [age, setAge] = useState({ age: 19, num: "908" });
const changeInput = ({ target: { value } }) => { dispatch({ type: "change", params: { name: value } }) }
const changeAge = () => { let _age = age; _age.age++; setAge({ ..._age }); }
return (<div className="App">
<input onChange={changeInput} />
<div>{state.name}</div>
<hr />
<button onClick={changeAge}>更新</button>
<p>{age.age}</p>
</div>);
}
export default App;
代码解读全部评论 (0)
还没有任何评论哟~