react - setState 的简写形式

Posted 2023-02-22

【中文标题】react - setState 的简写形式

【英文标题】：react - setState in short form

【发布时间】：2018-12-21 22:39:30

【问题描述】：

你会写吗

    let firstNameValid = this.state.firstNameValid;

    firstNameValid = value.length >= 1; 

    this.setState( firstNameValid, firstNameValid,) 

简写语法

this.setState( firstNameValid)  

我已经尝试了上面的代码，它似乎工作正常。 不知道会不会有副作用？

【问题讨论】：

this.setState( firstNameValid ) 只是this.setState( firstNameValid: firstNameValid ) 的糖。没有副作用。

好的，我明白了。谢谢！！！

【参考方案1】：

如果你的意思是你在写作

this.setState(foo: foo)

现在你正在使用this.setState( foo )

没有区别。

但是setState 很可能会产生副作用，首先是因为它是异步的，其次是因为您正在更改整个组件的状态并导致渲染。

顺便说一下，这种分配对象的简短方式是一个 JS 特性，与 react 无关。

【参考方案2】：

react 使用 ES2015（带有 webpack 和 babel）。

setState 接受的参数是对象。

在 ES2015 中 a : a 与 a 相同（对象简写符号）。

所以x = a : a, b : b ... 与x = a, b .. 相同 所以你的代码是完全有效的，不会有任何副作用。

【参考方案3】：

this.setState( firstNameValid ) 只是this.setState( firstNameValid: firstNameValid ) 的糖。没有副作用。

这些被称为shorthand property names，您可以阅读更多关于它们的信息here。