何时使用setState回调参数而不是直接传递值
何时使用setState回调参数而不是直接传递值
提问于 2021-02-06 05:30:25
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-06 05:55:59
我在setState上写了一张便条。我希望它能帮助你正确地使用它。如果你真心实意地阅读并理解它，你将更善于利用它来管理状态。
setState
是异步
state = { count: 0};
increment() {
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
this.setState({ count: this.state.count + 1});
console.log(this.state.count) // 0
}
increment()
console.log(this.state.count); // 1并且，this.state.count的最终值将在调用incemenent()完成后为1。
因为响应批处理所有调用，并计算出结果，然后有效地进行更改。这是一种纯JavaScript代码，合并到最后一个获胜的地方。
newState = Object.assign(
{},
firstSetStateCall,
secondSetStateCall,
thirdSetStateCall,
);因此，我们可以说，这里的一切都与JavaScript对象合并有关。所以还有另一种很酷的方法，我们用setState而不是object传递一个函数。
state = { count: 0};
increment() {
this.setState( (state) => { return { count: state.count + 1} } );
this.setState( (state) => { return { count: state.count + 1} } );
this.setState( (state) => { return { count: state.count + 1} } );
}
increment();
console.log(this.state.count) // 3这一次，我们将得到3，因为以前可以合并对象，但是不可能合并函数，因此它的工作方式类似于同步。
但是这种在this.setState中传递参数的方法的另一个很好的应用是，您可以在从函数返回对象之前实现逻辑。
this.setState( (state) => { if(state.count === 0) return { count: state.count + 1} } );不仅如此，我们在setState中传递的函数接受另一个参数，props。
this.setState((state, props) => { //play here })
但是，我们传递给它的函数会随着时间的推移变得混乱，那又怎样呢？只需建立一个常规的JavaScript函数
并将其传递给setState
this.setState(fn)
如果SetState是异步的，那么我们如何在状态更新之后执行操作呢？
setState实际上有两个参数，第二个参数是回调函数，在状态更新后调用，
this.setState (
(state, props) => {
// code here
},
() => {console.log("updated state", this.state)}
)Stack Overflow用户
发布于 2021-02-06 05:39:00
形式的选择取决于下一个状态是否使用当前状态的值。
如果新状态依赖于当前状态，则使用表单2，否则使用表单1。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66073880
复制相关文章
相似问题
腾讯云开发者
