React中的語法語法有效還是無效？

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}); 
}, 

我從這個教程，希望看到完整代碼的代碼的人：

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

Answer 1

這是一個被介紹給JavaScript在2015年新的語法稱爲解構。 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 })