注册账号登录
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注

在useState hooks中,使用不同的方法更新state

技术React创建于3月19日98次阅读
useState是一个帮助组件保存本地状态的hook,使用useState hook更新state,这里有两种不同的方式。

让我们来计算一下按钮的点击次数,
const [clicks, setClicks] = useState(0);
初始计数为0

1、更换state
每次点击按钮,你可以简单计算+1,

const handleClick = () => {
setClicks(clicks + 1);
};

例子:https://codesandbox.io/s/react-memo-in-action-qc65m?from-embed

如果你的更新是同步的并只在一个地方,这种更新方式会工作的很好。
但是如果点击值在不同位置异步更改,这样你的点击值容易是旧的state,这会使你的计数出错。
为了避开旧的state,你可能总是要获取上一个state并替换它。

2、更改先前的状态值

const handleClick = () => {
setClicks(prevCount => prevCount + 1);
};

例子:https://codesandbox.io/s/setstate-using-previous-value-vuyph?from-embed

这种方式,你可以总是获取最近的state值,并基于它计算一下state。

--------------------------------

译文来源于:https://jsmates.com/blog/different-ways-to-update-use-state-hooks
暂无评论
吴世剑
小度鱼作者,野生设计师,野生程序员。
关注私信
387
关注
200
粉丝
221
帖子