淺談React 屬性和狀態的一些總結

淺談React 屬性和狀態的一些總結_javascript技巧

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、屬性

1、第一種使用方法：索引值對

<ClaaNameA name = {[1,2,3]} />//數組

<ClaaNameA name = {FunctionNAme} /> //定義一個函數

2、第二種方法：三個點的展開對象形式

var props = {one :”123”,tow :321 }<ClassNameB {…props} />

增加三個引號相當於這裡面拿到兩個屬性了（one和two）

3、setProps形式：通過組件更新屬性，不能在組件內部中修改屬性的，因為會違背組件設計原則（盡量避免）

var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);instance.setProps({name:”Tom" });

二、狀態：事物所處的狀況，由事物自行處理不斷變化／事物的私人屬性

getInitialState：初始化每個執行個體特有的狀態

setState:更新群組件狀態

setState會觸發diff演算法：判斷state和頁面結果的區別，是否需要更新

三、狀態和屬性對比

狀態和屬性都會觸發render更新，都是純JS對象

狀態：是和自己相關的，既不受父組件也不受子組件影響

屬性：本身是不能自己去修改的，只能從父組件擷取屬性，父組件也能修改它的屬性

根本的區別：組件在運行時需要去修改維護的就是狀態

四、簡單的demo熟悉一下：

<!DOCTYPE html>2 <html>3  <head>4   <meta http-equiv='Content-type' content='text/html; charset=utf-8'>5   <title>daomul's example</title>6   <link rel="stylesheet" href="../shared/css/base.css" />7  </head>8  <body>9   <h1>Text demo</h1>  <div id="container">  </div>  <script src="../shared/thirdparty/es5-shim.min.js"></script>  <script src="../shared/thirdparty/es5-sham.min.js"></script>  <script src="../shared/thirdparty/console-polyfill.js"></script>  <script src="../../build/react.js"></script>  <script src="../../build/JSXTransformer.js"></script>  <script type="text/jsx">    //內容組件    var Content = React.createClass({     getInitialState:function(){      return {       inputText:'',      };     },     handleChange:function(event){      this.setState({inputText:event.target.value});     },     handleClick:function(){      console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);     },     render:function(){      return <div>       <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>       <button onClick = {this.handleClick}>sumbit</button>      </div>;     },    });    //評論組件    var Comment = React.createClass({     getInitialState:function(){      return {       names:["Tom","Axiba","daomul"],       selectName:'',      };     },     handleSelect:function(){      this.setState(        {selectName : event.target.value}       );     },     render:function(){      var options = [];      //往options中添加子option      for (var option in this.state.names) {       options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)      };      return <div>       <Content selectName = {this.state.selectName}>       </Content>       <select onChange = {this.handleSelect}>        {options}       </select>      </div>;     },    });    //start render    React.render(<Comment></Comment>,document.body);  </script> </body></html>

以上這篇淺談React 屬性和狀態的一些總結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More