Question

我是新手，并试图在React上做得更好。我对每个变量声明时的语法都有疑问，例如，在_initialize方法中，变量声明如下：var {users, messages} = this.state。为什么这是对的？我认为它与返回对象的初始State有什么关系？仅供参考这不是我的代码，而是来自教程。我刚刚完成了教程，但我从未见过像这样声明的变量。一些解释会很好。

var ChatApp = React.createClass({

getInitialState() {
  return {users: [], messages:[], text: ''};
},

componentDidMount() {
  socket.on('init', this._initialize);
  socket.on('send:message', this._messageRecieve);
  socket.on('user:join', this._userJoined);
  socket.on('user:left', this._userLeft);
  socket.on('change:name', this._userChangedName);
},

_initialize(data) {
  var {users, name} = data;
  this.setState({users, user: name});
},

_messageRecieve(message) {
  var {messages} = this.state;
  messages.push(message);
  this.setState({messages});
},

我从这个tutoriaL获得了想要查看完整代码的人的代码：

http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/

Answer 1

这是2015年引入JavaScript的新语法，称为解构。 These are the docs from MDN on destructuring assignment

给出以下对象：

var person = {
  name: 'alice',
  age: 20
}

此：

var { name, age } = person

相当于：

var name = person.name
var age = person.age

您可以在Babel's repl

中使用它

此外，在同一功能中，您将看到以下内容：

this.setState({ users, user: name })

这称为简化对象表示法。当属性和值具有相同的名称（这是JavaScript中非常常见的模式）时，可以省略该值。

上述内容相当于：

this.setState({ users: users, user: name })

教程中的React语法有效还是无效？

1 个答案: