反應ES6組件，構造變量與狀態變量

Question

在構造中定義變量並在模板中使用它們與定義getInitialState（）函數內部之間有什麼區別？

在ES6中，我可以忘記使用getInitialState（）並移動所有構造？

例子：

class TodoApp extends Component { 

    constructor() { 
    super(); 
    this.test1 = 'hello this is a test'; 
    this.state = { // thanks to @Piotr Berebecki, 
        // i know to define states variable 
     test2:'this is state test' 
    } 
    } 
    changeTest() { 
    this.state.test2 = 'my new state test'; 

    } 
    render() { 


    return (
     <div> 
     <button onClick={this.changeTest}>change</button> 
     Test:{this.test1} 
     <br/>State Test:{this.test2} 
     </div> 
    ); 
    } 
} 


ReactDOM.render(
    <TodoApp />, 
    document.getElementById('app') 
); 

Answer 1

隨着我們不使用getInitialState的ES6類語法。相反，我們在構造方法中使用：this.state = {}。看看演示在這裏：http://codepen.io/PiotrBerebecki/pen/yagVgA

也正式做出反應的文檔（https://facebook.github.io/react/docs/reusable-components.html#es6-classes）：

你也可以定義你的陣營類作爲一個普通的JavaScript類。例如使用ES6類語法。 API與React.createClass類似，但getInitialState除外。不是提供一個單獨的getInitialState方法，而是在構造函數中設置自己的狀態屬性。就像getInitialState的返回值一樣，分配給this.state的值將用作組件的初始狀態。

下面的兩個片段顯示了語法上的差異。

class TodoApp extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     test2: 1 
    }; 
    this.test3 = 'this is test3'; 
    } 

    changeState() { 
    this.setState({ 
     test2: this.state.test2 + 1 
    }); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.changeState.bind(this)}>test2: {this.state.test2}</button> 
     <p>test3: {this.test3}</p> 
     </div> 
    ); 
    } 
} 

以上是等效於：

var TodoApp = React.createClass({ 
    getInitialState: function() { 
    return { 
     test2: 1 
    }; 
    }, 

    test3: 'this is test3', 

    changeState: function() { 
    this.setState({ 
     test2: this.state.test2 + 1 
    });  
    }, 

    render: function() { 
    return (
     <div> 
     <button onClick={this.changeState}>test2: {this.state.test2}</button> 
     <p>test3: {this.test3}</p> 
     </div> 
    ); 
    } 
});