React js的屬性和狀態

屬性:props    一般屬性是不改變的,經常作為傳入的資料.

例: 建立PropsTest控制元件,從網頁上輸出簡單的  Hello, XXX, XXX為傳入的屬性name,當name為空時,輸出Hello,World   輸入為其他值時,比如:Curry,輸出Hello,Curry

<script type="text/babel">
    var PropsTest = React.createClass( {
        render: function () {
            return (
                    <div>
                        Hello, {this.props.name? this.props.name: "World"}
                    </div>
            );
        }
    });
    ReactDOM.render(
            <PropsTest name="Curry"/>,
            document.body
    );
</script>

狀態:state  一般狀態是不斷變化的,空間內部可以控制state的變化

例: 建立StateTest控制元件,實現在輸入框中輸入資料XXX,輸入Hello, XXX.  XXX隨著輸入框的輸入內容而改變.  

在render方法中定義<div>Hello, {this.state.name}</div>,   定義input,並新增onChange方法textChange, 在方法裡面程式碼實現name的值隨輸入的值改變

程式碼如下:

<script type="text/babel">
    var StateTest = React.createClass( {
        getInitialState: function () {
            return {
                name: 'World'
            }
        },
        textChange: function (event) {
            this.setState({
                name: event.target.value
            });
        },
        render: function () {
            return (
                    <div>
                        <p>Hello, {this.state.name}</p>
                        <input type="text" onChange={this.textChange} />
                    </div>
            );
        }
    });
    ReactDOM.render(
            <StateTest />,
            document.body
    );
</script>

區分:  元件在執行時需要修改的資料時狀態

狀態和屬性的相似點: 1,是純js物件

                                2,改變會觸發render方法

                     不同點: 1,屬性值可以由父類傳入,狀態值不能

                                       2,屬性值不在元件內部修改,而狀態值就是在元件內部修改的