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