为什么要使用useReducer，而不是useState?
发布时间
阅读量：
阅读量
useState
总感觉有一些延迟
总感觉有一些延迟
总觉得存在一定的延迟
总觉得存在一定的延迟
const [user,setUser] = =useState({ id: "", name: "duxin", age: "18" })
代码解读当重新调用setUser方法时，用户变量未能及时更新并渲染到组件内。原因在于，在进行更新操作时使用的方式为setUser(_user)。
setUser(_user)虽然两者都能更新user变量。然而，在监听数据变化时，默认未发生改变（corrected "成"为"次"），导致组件未能及时更新，并最终造成数据更新延迟的效果。
类似于数据的双向绑定机制
类似于数据的双向绑定机制
useReducer
useReducer是useState的一个替代方案。
在一些特定情况下，在使用 state 组件时选择使用 useReducer 可能会比 useState 更为合适。具体来说，在涉及复杂的 state 节奏且包含多个子值的情况下（即状态变量之间相互依赖关系较强），或者当后续的 state 需要依赖先前的状态时（即组件在进行深更新时能够显著提升性能）。
看起来，有点像redux的reducer的用法了。
源码
/* * @Author: 1638877065@qq.com
* @Date: 2021-08-25 15:12:55
* @LastEditTime: 2021-08-25 16:15:56
* @LastEditors: 1638877065@qq.com
* @Description:
* @FilePath: \test\src\App.js
*/
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)
还没有任何评论哟~