掛載階段的組件生命週期（一）

咱們在講解 JSX 的章節中提到，下面的代碼：

ReactDOM.render(
 <Header />, 
  document.getElementById('root')
)

會編譯成：

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById('root')
)

其實咱們把 Header 組件傳給了 React.createElement 函數，又把函數返回結果傳給了 ReactDOM.render。咱們能夠簡單猜測一下它們會幹什麼事情：

// React.createElement 中實例化一個 Header
const header = new Header(props, children)
// React.createElement 中調用 header.render 方法渲染組件的內容
const headerJsxObject = header.render()

// ReactDOM 用渲染後的 JavaScript 對象來來構建真正的 DOM 元素
const headerDOM = createDOMFromObject(headerJsxObject)
// ReactDOM 把 DOM 元素塞到頁面上
document.getElementById('root').appendChild(headerDOM)

上面過程其實很簡單，看代碼就能理解。

咱們把 React.js 將組件渲染，而且構造 DOM 元素而後塞入頁面的過程稱爲組件的掛載（這個定義請好好記住）。其實 React.js 內部對待每一個組件都有這麼一個過程，也就是初始化組件 -> 掛載到頁面上的過程。因此你能夠理解一個組件的方法調用是這麼一個過程：

-> constructor()
-> render()
// 而後構造 DOM 元素插入頁面

這固然是很好理解的。React.js 爲了讓咱們可以更好的掌控組件的掛載過程，往上面插入了兩個方法：

-> constructor()
-> componentWillMount()
-> render()
// 而後構造 DOM 元素插入頁面
-> componentDidMount()

componentWillMount 和 componentDidMount 都是能夠像 render 方法同樣自定義在組件的內部。掛載的時候，React.js 會在組件的 render 以前調用 componentWillMount，在 DOM 元素塞入頁面之後調用 componentDidMount。

咱們給 Header 組件加上這兩個方法，而且打一些 Log：

class Header extends Component {
  constructor () {
    super()
    console.log('construct')
  }

  componentWillMount () {
    console.log('component will mount')
  }

  componentDidMount () {
    console.log('component did mount')
  }

  render () {
    console.log('render')
    return (
      <div>
        <h1 className='title'>React 小書</h1>
      </div>
    )
  }
}

在控制檯你能夠看到依次輸出：

能夠看到，React.js 確實按照咱們上面所說的那樣調用了定義的兩個方法 componentWillMount 和 componentDidMount。

機靈的同窗能夠想到，一個組件能夠插入頁面，固然也能夠從頁面中刪除。

-> constructor()
-> componentWillMount()
-> render()
// 而後構造 DOM 元素插入頁面
-> componentDidMount()
// ...
// 從頁面中刪除

React.js 也控制了這個組件的刪除過程。在組件刪除以前 React.js 會調用組件定義的 componentWillUnmount：

-> constructor()
-> componentWillMount()
-> render()
// 而後構造 DOM 元素插入頁面
-> componentDidMount()
// ...
// 即將從頁面中刪除
-> componentWillUnmount()
// 從頁面中刪除

看看什麼狀況下會把組件從頁面中刪除，繼續使用上面例子的代碼，咱們再定義一個 Index 組件：

class Index extends Component {
  constructor() {
    super()
    this.state = {
      isShowHeader: true
    }
  }

  handleShowOrHide () {
    this.setState({
      isShowHeader: !this.state.isShowHeader
    })
  }

  render () {
    return (
      <div>
        {this.state.isShowHeader ? <Header /> : null}
        <button onClick={this.handleShowOrHide.bind(this)}>
          顯示或者隱藏標題
        </button>
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

Index 組件使用了 Header 組件，而且有一個按鈕，能夠控制 Header 的顯示或者隱藏。下面這行代碼：

...a
{this.state.isShowHeader ? <Header /> : null}
...

至關於 state.isShowHeader 爲 true 的時候把 Header 插入頁面，false 的時候把 Header 從頁面上刪除。這時候咱們給 Header 添加 componentWillUnmount 方法：

...
  componentWillUnmount() {
    console.log('component will unmount')
  }
...

這時候點擊頁面上的按鈕，你會看到頁面的標題隱藏了，而且控制檯打印出來下圖的最後一行，說明 componentWillUnmount 確實被 React.js 所調用了：

你能夠屢次點擊按鈕，隨着按鈕的顯示和隱藏，上面的內容會按順序重複地打印出來，能夠體會一下這幾個方法的調用過程和順序。

總結

React.js 將組件渲染，而且構造 DOM 元素而後塞入頁面的過程稱爲組件的掛載。這一節咱們學習了 React.js 控制組件在頁面上掛載和刪除過程裏面幾個方法：

• componentWillMount：組件掛載開始以前，也就是在組件調用 render 方法以前調用。
• componentDidMount：組件掛載完成之後，也就是 DOM 元素已經插入頁面後調用。
• componentWillUnmount：組件對應的 DOM 元素從頁面中刪除以前調用。

但這一節並無講這幾個方法到底在實際項目當中有什麼做用，下一節咱們經過例子來說解一下這幾個方法的用途。

下一節：掛載階段的組件生命週期（二）

上一節：前端應用狀態管理 —— 狀態提高