React 教程第五篇 —— state

state

state 可以理解成 props，不一樣的在於 props 是隻讀的，而 state 是可讀寫。當 state 發生改變的時候會重新執行 render 方法去渲染整顆 DOM 樹，在渲染的過程中會有 diff 演算法去計算哪些 DOM 有更新，從而提升效能。
在使用 state　前要先初始化 getInitialState
更改 state 一定要用 setState
getInitialState 該方法在每次 render 時都會被呼叫一次。

//es5
var StateComponent = React.createClass({
    getInitialState: function(){
        return {
            text: ``
        }
    },
    change: function(event){
        this.setState({text: event.target.value});
    },
    render: function(){
        return (
            <div>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </div>
        )
    }
}) 

//es6
import React from `react`;
import ReactDOM from `react-dom`;
class Component1 extends React.Component{
    state = {
        text: ``
    }
    change(event){
        this.setState({text: event.target.value});
    },
    render(){
        return (
            <div>
                <p><input type="text" onChange={this.change}/></p>
                <p>{this.state.text}</p>
            </div>
        )
    }
}

效果預覽