react入門----(this.state/表單/Ajax)

1.this.state

　　組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI

var TestStateComponent = React.createClass({
            getInitialState: function () {
                return {
                    liked: false
                }
            },
            handleClick: function (event) {
                this.setState({
                    liked: !this.state.liked
                })
            },
            render: function () {
                var text = this.state.liked ? "like" : "haven't liked"
                return (
                    <p onClick={this.handleClick}>
                        You {text} this Click to toggle
                    </p>
                )
            }
        })
        ReactDOM.render(<TestStateComponent/>,document.getElementById('container'))

　　上面代碼是一個 TestStateComponent 組件，它的 getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取。當用戶點擊組件，導致狀態變化，this.setState 方法就修改狀態值，每次修改以后，自動調用 this.render 方法，再次渲染組件。

　　由於 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。

2.表單

<!-- 用戶在表單填入的內容，屬於用戶跟組件的互動，所以不能用 this.props 讀取 -->
        var Input = React.createClass({
            getInitialState: function () {
                return {
                    inputVal: ''
                }
            },
            handleChange: function (event) {
                console.log(event.target.value)
                this.setState({
                    inputVal: event.target.value
                })
            },
            render: function () {
                var value = this.state.inputVal
                return (
                    <div>
                        <input type="text" vaule={value} onChange={this.handleChange}/>
                        <p>{value}</p>
                    </div>
                )
            }
        })
        <!-- 上面代碼中，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，通過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬於這種情況， -->
        ReactDOM.render(<Input/>,document.getElementById('container'))

 3.Ajax

var UserList = React.createClass({
            getInitialState: function () {
                return {
                    userName: '',
                    lastGisUrl
                }
            },
            componentDidMunt: function () {
                $.get(this.props.source, function (res) {
                    var lastDist = res[0]
                    this.setState({  
                        username: lastGist.owner.login,  
                        lastGistUrl: lastGist.html_url  
                      });  
                    }.bind(this))
                })
            },
            <!-- 當異步加載數據的時候， 使用 componentWillUnmount 來取消任何未完成的請求 在組件卸載之前 -->
            componentWillUnmount: function() {  
                this.serverRequest.abort()
            },
            render: function() {
                return (
                  <div>
                    {this.state.username}'s last gist is
                    <a href={this.state.lastGistUrl}>here</a>.
                  </div>
                )
            }
        })
        <!-- 在組件從 DOM 中移除的時候立刻被調用。
        在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素
        所以我們可以用這個方法替代 isMounted() 來確保該組件是否還是mounted -->
        ReactDOM.render(
          <UserList source="https://api.github.com/users/octocat/gists" />,
          document.getElementById('container')
        )
        <!-- 上面代碼從Github的API抓取數據，然后將Promise對象作為屬性，傳給RepoList組件。
        如果Promise對象正在抓取數據（pending狀態），組件顯示"正在加載"；如果Promise對象報錯（rejected狀態），組件顯示報錯信息；如果Promise對象抓取數據成功（fulfilled狀態），組件顯示獲取的數據。 -->