摘要:[ReactJS]React學習筆記(3) - props vs state
在React中，有提供兩個屬性進行資料的傳遞與儲存－this.props 以及 this.state。這兩個屬性有不同的特性與行為，在使用上，大概可以區分為靜態資料使用this.props，動態資料使用this.state。另外還有一個屬性this.refs，是用來取得UI元素的參考用的。
使用this.props
this.props通常是使用在父元素傳值給子元素的情境上，直接看Example比較快。
基本上，當父元素想傳值給子元素時，會設定在標籤的Attribute上。子元素就能夠透過this.props.Attribute名 以取得父元素傳進來的值。這是一種單向的資料傳遞，也就是說，只能由父元素傳到子元素，無法由子元素傳到父元素。但如果因為程式架構的關係，需要由子元素傳資料到父元素時，該怎麼辦呢？在React.JS的官方Sample中，有這麼一個處理方式。就是由父元素設定一個function到一個Attribute上，子元素再把要傳給父元素的資料放到function的arguments。這樣父元素的function就可以取得子元素傳進來的資料了。
這個Example是把子元素的文字輸入框的輸入值，帶到父元素的文字內容中。
使用this.state
React使用Virtual DOM層隔在實際的DOM層之前，這樣的做法，是讓React自行控管DOM元素的生成及變動。好處是，Reactc自行計算UI元素的變動，並採用最小差異值進行DOM的更新，因而提升網頁效能。那麼，要怎麼跟React溝通，讓它知道內容有變更了呢？就是使用this.state。
this.state的建立，是在createClass()中的getInitialState()中給予初始值，可以參考官網的說明－Component Specs and Lifecycle。同時，它是唯讀的，如果要設定值的話，必須要透過this.setState()進行修改。 可以參考上一個Example，子元素透過function arguments傳值給父元素，父元素要動態的更新其UI內容時，透過this.setState()更新this.state。
使用this.refs
如果我們需要在function中抓取我們動態render的某個UI元素，例如文字輸入框、下拉選單，需要怎麼做？React提供了我們this.refs屬性，可以用來參照到我們所設定的UI元素。要使用這個屬性，必須在UI元素中加入ref這一個Attribute。通常會搭配React.findDOMNode()這個function以取得物件的參考並進行處理。
上一個Example有使用到這篇文章所使用到的這三個屬性，再貼一次，方便參考。