何时使用React setState回调

当react组件状态更改时,将调用render方法。因此,对于任何状态更改,都可以在渲染方法体中执行操作。那么,setState回调是否有特定的用例

是的,因为setState异步方式工作。这意味着调用setState后,this.state变量不会立即更改。所以,如果您想在对状态变量设置状态后立即执行操作,然后返回结果,那么回调将非常有用

考虑下面的例子

。。。。
changeTitle:函数changeTitle(事件){
this.setState({title:event.target.value});
这是validateTitle();
},
validateTitle:函数validateTitle(){
if(this.state.title.length==0){
this.setState({titleError:“Title不能为空”});
}
},
....

上述代码可能无法按预期工作,因为title变量在对其执行验证之前可能没有发生变异。现在,您可能会想,我们可以在render()函数本身中执行验证,但如果我们可以在changeTitle函数本身中处理此问题,则会更好、更简洁,因为这样会使您的代码更有条理、更易于理解

在这种情况下,回调很有用

。。。。
changeTitle:函数changeTitle(事件){
this.setState({title:event.target.value},function()){
这是validateTitle();
});
},
validateTitle:函数validateTitle(){
if(this.state.title.length==0){
this.setState({titleError:“Title不能为空”});
}
},
....

另一个例子是,当您希望分派并在状态更改时执行操作时。您将希望在回调中执行此操作,而不是在render()中执行此操作,因为每次重新渲染时都会调用它,因此在需要回调的情况下,可能会出现许多此类情况

另一种情况是API调用

当您需要基于特定状态更改进行API调用时,可能会出现这种情况,如果您在render方法中这样做,则会在每次renderonState更改时调用它,或者因为传递给子组件的某些道具发生更改

在这种情况下,您需要使用setState回调将更新的状态值传递给API调用

。。。。
changeTitle:功能(事件){
this.setState({title:event.target.value},()=>this.APICallFunction());
},
APICallFunction:function(){
//使用更新的值调用API
}
....

发表评论