react學習小記

事件監聽

1. 這些 on* 的事件監聽只能用在普通的 HTML 的標籤上，而不能用在組件標籤上。用在組件上是沒有作用的
2. 在綁定事件處理方法時，需要通過bind指定this指向、或者用箭頭函數，是因爲 React.js 調用你所傳給它的方法的時候，並不是通過對象方法的方式調用（this.handleClickOnTitle），而是直接通過函數調用 （handleClickOnTitle），所以事件監聽函數內並不能通過 this 獲取到實例。

state

1. 通過調用setState，並不會立馬修改state,而是把這個對象放到一個更新隊列裏面，稍後纔會從隊列當中把新的狀態提取出來合併到 state 當中，然後再觸發組件更新
2. 如果需要立馬做該state的處理，可以給setState傳遞一個函數，在函數裏面做處理, 例如以下例子：以下三次setState並不會讓組件渲染三次，React.js 內部會把 JavaScript 事件循環中的消息隊列的同一個消息中的 setState 都進行合併以後再重新渲染組件。

  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一個 setState 的返回是 count 爲 0，當前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一個 setState 的返回是 count 爲 1，當前返回 3
    })
    // 最後的結果是 this.state.count 爲 3
  }

生命週期

1. componentWillMount只會在裝載之前調用一次，在 render 之前調用，在這個方法裏面調用 setState 改變狀態，並且不會導致額外調用一次 render
2. componentDidMount只會在裝載完成之後調用一次，在 render 之後調用，從這裏開始可以通過 ReactDOM.findDOMNode(this) 獲取到組件的 DOM 節點。findDOMNode() 不能用在無狀態組件上。
3. componentWillUnmount卸載組件觸發
4. 更新階段的生命週期：
   • shouldComponentUpdate通過這個方法控制組件是否重新渲染。如果返回 false 組件就不會重新渲染。這個生命週期在 React.js 性能優化上非常有用。
   • componentWillReceiveProps組件從父組件接收到新的 props 之前調用。
   • componentWillUpdate 組件開始重新渲染之前調用
   • componentDidUpdate 組件重新渲染並且把更改變更到真實的 DOM 以後調用