React混淆知識摘錄

react是Facebook內部的一個JavaScript類庫，已於2013年開源。

---

###react的生命週期 一個實例初次被建立時所調用的生命週期方法與其餘各個後續實例被建立時所調用的方法略有不一樣，當你首次使用一個組件類時，你會看到下面這些方法依次被調用：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

對於該組件的全部後續應用，你將會看到下面的方法依次被調用。注意，getDefaultProps方法已經不在列表中了。

• getInitialState
• componentWillMount
• render
• componentDidMount

其中，render方法返回的結果不是真正的DOM，而是一個虛擬的表現，React隨後會把它和真實的DOM作對比，來判斷是否有必要作出修改

而當render方法成功調用而且真實的DOM已經被渲染以後，你能夠在componentDidMount內部經過this.getDOMNode()方法訪問到底層的DOM節點，可是不要試圖在render方法中這樣作。由於在render方法完成而且React執行更新以前，底層的DOM節點可能不是最新的

經過調用shouldComponentUpdate方法在組件渲染時能夠進行精確優化，可是這個方法是非必須的，而且大多數狀況下不必在開發中使用它。

在componentDidMount方法中添加的全部任務都須要在該方法中撤銷，好比建立的定時器或者添加的事件監聽器

###數據流 props就是properties的縮寫，你可使用它把任意類型的數據傳遞給組件，能夠在掛載的時候設置它的props或者經過調用組件實例的setProps方法（不多這樣用）來設置props

var surveys = [{name:'sunshine'}];
  var lists = React.render(
    <Lists/>
    document.querySelector('body')
)
list.setProps({surveys:surveys});

可是注意一點，你只能在子組件上或者在組件樹外調用setProps,千萬不要調用this.setProps或者直接修改this.props，若是真的須要，請使用state getDefaultProps並非在在組件實例化時被調用的，而是在React.createClass調用時就被調用了，返回值會被緩存起來，也就是說不能在getDefaultProps中使用任何特定的實例數據 千萬不能直接修改this.state,永遠記得要經過this.setState方法修改

###事件處理 更新組件狀態有兩種方案：組件的setState方法和replaceState,replaceState用一個全新的state對象完整地替換掉原有的state。使用不可變數據結構來表示狀態時，這種方式頗有效，不過不多應用於其餘場景下。更多的狀況會使用setState，它僅僅是把傳入的對象合併到已有的state對象

一般有一個事件對象傳入到React的事件處理函數中，相似原生Javascript事件監聽器的寫法.

handleComplete:function(event){
     this.callMethodOnProps('onCompleted',event.target.value);
  }