react - setState 的简写形式答案

【问题标题】：react - setState in short formreact - setState 的简写形式
【发布时间】：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。

【讨论】：