React js屬性和狀態的使用和區別

 

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,屬性值不在組件內部修改,而狀態值就是在組件內部修改的