React 屬性和狀態詳解 · 致力于web前端技術撰寫

### 屬性的含義和用法 props=properties? 屬性:一個事物的性質與關系? 屬性往往是與生俱來的、無法自己改變的.? 屬性的用法：? **第一種方法：鍵值對**? 1、傳入一個字符串:”Hi”(字符串)/{“Hi”};? 2、傳入一個數組{[arry]};? 3、傳入一個變量{variable} ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var HelloWorld = React.createClass({ render: function () { return <p>Hello, {this.props.name ? this.props.name : "World"}</p>; } }); var HelloUniverse = React.createClass({ getInitialState: function () { return {name: ""}; }, handleChange: function (event) { this.setState({name: event.target.value}); }, render: function () { return( <div> <HelloWorld name = {this.state.name}></HelloWorld> <input type = "text" onChange = {this.handleChange}/> </div> ) } }); ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example")); </script> ~~~ 運行結果如下，使用的是鍵值對的方式? ![](https://box.kancloud.cn/2016-04-07_57060400aea35.jpg) **第二種方法：可以理解為展開**? var props = {one:”hello”, two:”message”}? React提供展開語法…,使用…加對象,react就會把對象中的屬性和值，當成是屬性的賦值：? ~~~ <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var HelloWorld = React.createClass({ render: function () { return <p>Hello, {this.props.name + " " + this.props.age}</p>; } }); var HelloUniverse = React.createClass({ getInitialState: function () { return {name: "Yvette", age: "25"}; }, handleChange: function (event) { this.setState({name: event.target.value}); }, render: function () { return( <div> <HelloWorld {...this.state}></HelloWorld> <input type = "text" onChange = {this.handleChange}/> </div> ) } }); ReactDOM.render(<HelloUniverse></HelloUniverse>, document.querySelector("#example")); </script> ~~~ 運行結果如下，使用{…this.state}展開? ![](https://box.kancloud.cn/2016-04-07_57060400c1605.jpg) **第三種方法：調用react提供的setProps函數**? setProps接收的參數是一個對象，但是react不推薦改變組件的屬性,可以通過父組件向子組件傳入的方式。 ~~~ <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var HelloWorld = React.createClass({ render: function(){ return <p>Hello, {this.props.name}</p> } }); var instance = ReactDOM.render(<HelloWorld></HelloWorld>, document.querySelector("#example")); instance.setProps({name: "William"}); </script> ~~~ 使用setProps修改屬性值，此種方式不推薦，如果需要改變屬性值，可以參考第一個例子，利用父組件去修改。 ### 狀態的含義和用法 state? 狀態：事物所處的狀況。? 狀態是由事物自行處理、不斷變化的。? 狀態是事物的私有屬性。? 狀態的用法? getInitialState:初始化每個實例特有的狀態? setState:更新組件狀態? 使用setState——啟用diff算法——有變化，更新DOM ### 屬性和狀態的對比屬性和狀態的相似點? 1、都是純JS對象? 2、都會觸發render更新? 3、都具有確定性? 狀態只和組件本身相關，組件不能修改屬性 ![](https://box.kancloud.cn/2016-04-07_57060400d30ae.jpg) 組件在運行時需要修改的數據就是狀態。 ### 屬性和狀態的實例編寫一個簡單的文章評論框? 第一步：分析構成項目的組件? 第二步：分析徐俊的關系和數據傳遞? 第三步：編寫代碼? 第一步：分析構成項目的組件? 評論框? 內容? 第二步：分析徐俊的關系和數據傳遞? 評論框是內容的父組件? 父組件需要傳遞評論對象子組件，評論對象是內容組件的屬性，評論內容是內容組件的狀態。 1、select，option是寫死的? 2、option的內容應該是動態的，將option的內容作為狀態提取出來利用屬性和狀態實現一個評論框: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title>評論框</title> </head> <body> <div id = "example"></div> </body> </html>     <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var style = { width:300 + 'px', height:150 + 'px', marginTop:20+'px', marginBottom:20+'px', resize: 'none', textIndent:10 + 'px' }; var Content = React.createClass({ getInitialState: function (){ return{ inputText: "" }; }, handleChange: function(event){ this.setState({inputText:event.target.value}) }, handleSubmit: function () { console.log("reply to: " + this.props.selectName + "\n" + this.state.inputText); }, render: function () { return (<div> <textarea style = {style} onChange = {this.handleChange} placeholder = "please enter something..." ></textarea> <br/> <button onClick = {this.handleSubmit}>submit</button> </div>); } }); var Comment = React.createClass({ getInitialState: function () { return{ names: ["William", "Yvette", "Katharine"], selectName: "" }; }, handleChange: function (event) { this.setState({selectName:event.target.value}) }, render: function () { var options = []; for(var option in this.state.names){ options.push(<option value = {this.state.names[option]}> {this.state.names[option]} </option>) }; return ( <div> <select onChange = {this.handleChange}> {options} </select> <Content selectName = {this.state.selectName}></Content> </div>); } }); ReactDOM.render(<Comment></Comment>, document.querySelector("#example")); </script> ~~~ 需要注意的是，React中,style不能直接寫300px,需要使用拼接,另外margin-top等也需要使用駝峰命名法,寫成marginTop? 運行結果如下:? ![](https://box.kancloud.cn/2016-04-07_57060400ea0d5.jpg)