为了账号安全,请及时绑定邮箱和手机立即绑定

何时使用ReactisesetState回调

何时使用ReactisesetState回调

慕姐4208626 2019-07-03 16:51:43
何时使用ReactisesetState回调当ReactiveComponent状态发生变化时,将调用Render方法。因此,对于任何状态更改,都可以在呈现方法主体中执行操作。那么,对于setState回调是否有特定的用例?
查看完整描述

3 回答

?
达令说

TA贡献1821条经验 获得超6个赞

是的,因为setState工作于asynchronous方式,道路。这意味着在打电话后setState这个this.state变量不会立即更改。因此,如果要在设置状态变量的状态后立即执行操作,然后返回结果,则回调将非常有用。

考虑下面的例子

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

以上代码可能无法按预期工作,因为title变量在对其执行验证之前可能没有发生变异。现在,您可能会想知道我们是否可以在render()函数本身,但是如果我们能够在changeTitle函数本身中处理这个问题,它会更好,更干净,因为这会使您的代码更有组织性和可理解性。

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

....changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });},validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }},....

另一个例子是当你想dispatch以及状态改变时的行动。您将希望在回调中执行此操作,而不是在render()因为它将被称为每次重命名发生,因此许多这样的场景是可能的,在那里您将需要回调。

另一个案例是API Call

当您需要根据特定的状态更改进行api调用时,可能会出现这样的情况,如果在呈现方法中这样做,则在每次呈现时都会调用它。onState更改,或者是因为某些支持传递给了Child Component变化。

在这种情况下,您可能希望使用setState callback将更新的状态值传递给api调用

....changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());},APICallFunction: function () {
  // Call API with the updated value}....


查看完整回答
反对 回复 2019-07-03
?
DIEA

TA贡献1820条经验 获得超2个赞

在我的脑海中出现的1.用法是api调用,它不应该进入呈现,因为它将运行each状态改变。而api调用应该只在特殊状态变化时执行,而不是在每一,每个渲染。

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)} performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });}

因此,对于任何状态更改,都可以在呈现方法主体中执行操作。

非常糟糕的做法,因为render-方法应该是纯的,它意味着没有操作、状态更改、API调用,应该执行,只需要组合视图并返回它。应该只对某些事件执行操作。呈现不是一个事件,而是componentDidMount例如。


查看完整回答
反对 回复 2019-07-03
  • 3 回答
  • 0 关注
  • 657 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信