react的state和props

state狀態(tài)和props屬性是react非常重要的兩個方面,狀態(tài)控制組件內(nèi)部的變化繁扎,屬性獲取外部傳遞給內(nèi)部的數(shù)據(jù)幔荒,當state和props改變時,會重新調(diào)用render方法梳玫,渲染dom對象爹梁。

state狀態(tài)

常用方法:

  1. getInitialState:獲取組件的初始化狀態(tài),在組件加載的時候調(diào)用(render前)
  2. this.state:獲取組件的狀態(tài)的值提澎,但不能通過this.state.xxx = xxx改變狀態(tài)的值
  3. this.setState:用來改變組件狀態(tài)的值 姚垃,用法如下
var Radio= React.createClass({ 
  // 定義組件的初始狀態(tài),初始為關 
  getInitialState: function() {
     return { checked: false } 
  }, // 通過 this.state 獲取當前狀態(tài) 
  changeCheck: function() { 
    this.setState({ checked: !this.state.checked}); }
 }),
  render: function() {
     return <label className="radio"> 
        <input type="radio" checked={this.state.checked} onChange={this.changeCheck}/> 選中
      </label> 
},
 // 通過 setState 修改組件狀態(tài) // setState 過后會 React 會調(diào)用 render 方法重渲染 

props屬性

常用方法:
1.this.props.xxx 用來獲取寫在組件中的xxx屬性的值 注意jsx中class屬性為 className虱朵,for屬性為 htmlFor莉炉;
2.getDefaultProps:獲取默認的屬性對象钓账,在render前調(diào)用一次碴犬,用于將組件中綁定的屬性添加到this.props ;可以設置默認值梆暮,當組件屬性沒傳值時服协,調(diào)用默認值;
3.this.props.children :獲取子節(jié)點的屬性啦粹,其中children只能為一個元素偿荷,不能為組件

var GetChildItem = React.createClass({ 
  render: function() { 
    var props = this.props; 
    return <div className="todo-item"> 
      <span class="todo-item__name">{props.children}</span> 
    </div> 
    }
 });
 ReactDOM.render( 
    <GetChildItem >子節(jié)點內(nèi)容</GetChildItem >, document.getElementById('example'));
  1. propsType用來校驗屬性傳遞的正確性(非空,類型驗證等),通常寫在最前面唠椭;
    var MyComponent = React.createClass({
        propTypes: {
            optionalRequired:React.PropTypes.isRequired,//不能為空
            optionalArray: React.PropTypes.array,
            optionalBool: React.PropTypes.bool,
            optionalFunc: React.PropTypes.func,
            optionalNumber: React.PropTypes.number,
            optionalObject: React.PropTypes.object,
            optionalString: React.PropTypes.string,
            // 任何可以被渲染的包括跳纳,數(shù)字,字符串贪嫂,組件,或者數(shù)組
            optionalNode: React.PropTypes.node,
            // React 元素
            optionalElement: React.PropTypes.element,
            customProp: function(props, propName, componentName) {}//自定義校驗
        }
    });
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市牵囤,隨后出現(xiàn)的幾起案子古瓤,更是在濱河造成了極大的恐慌,老刑警劉巖亮靴,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件馍盟,死亡現(xiàn)場離奇詭異,居然都是意外死亡茧吊,警方通過查閱死者的電腦和手機贞岭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門八毯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人曹步,你說我怎么就攤上這事宪彩。” “怎么了讲婚?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵尿孔,是天一觀的道長。 經(jīng)常有香客問我筹麸,道長活合,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任物赶,我火速辦了婚禮白指,結果婚禮上,老公的妹妹穿的比我還像新娘酵紫。我一直安慰自己告嘲,他們只是感情好,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布奖地。 她就那樣靜靜地躺著橄唬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪参歹。 梳的紋絲不亂的頭發(fā)上仰楚,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機與錄音犬庇,去河邊找鬼僧界。 笑死,一個胖子當著我的面吹牛臭挽,可吹牛的內(nèi)容都是我干的捂襟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼欢峰,長吁一口氣:“原來是場噩夢啊……” “哼葬荷!你這毒婦竟也來了?” 一聲冷哼從身側響起赤赊,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤闯狱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后抛计,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哄孤,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年吹截,在試婚紗的時候發(fā)現(xiàn)自己被綠了瘦陈。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凝危。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖晨逝,靈堂內(nèi)的尸體忽然破棺而出蛾默,到底是詐尸還是另有隱情,我是刑警寧澤捉貌,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布支鸡,位于F島的核電站,受9級特大地震影響趁窃,放射性物質(zhì)發(fā)生泄漏牧挣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一醒陆、第九天 我趴在偏房一處隱蔽的房頂上張望瀑构。 院中可真熱鬧,春花似錦刨摩、人聲如沸寺晌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呻征。三九已至,卻和暖如春像屋,著一層夾襖步出監(jiān)牢的瞬間怕犁,已是汗流浹背边篮。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工己莺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人戈轿。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓凌受,卻偏偏與公主長得像,于是被迫代替她去往敵國和親思杯。 傳聞我的和親對象是個殘疾皇子胜蛉,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記色乾,個人覺得該教程講解深入淺出誊册,比目前大...
    leonaxiong閱讀 2,833評論 1 18
  • 目前,react組件有三種寫法暖璧,分別是es5的createClass寫法案怯,es6的class寫法,以及statel...
    ZoomFunc閱讀 1,649評論 0 1
  • React Native是基于React的澎办,在開發(fā)React Native過程中少不了的需要用到React方面的知...
    亓凡閱讀 1,466評論 1 4
  • 現(xiàn)在最熱門的前端框架嘲碱,毫無疑問是 React 金砍。上周,基于 React 的 React Native 發(fā)布麦锯,結果一...
    sakura_L閱讀 428評論 0 0
  • GUIDS 第一章 為什么使用React恕稠? React 一個提供了用戶接口的JavaScript庫。 誕生于Fac...
    jplyue閱讀 3,532評論 1 11