React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）

pf_miles 發布于2019-08-21 17:34 / 3413人閱讀

摘要：我們把將組件渲染，并且構造元素然后塞入頁面的過程稱為組件的掛載這個定義請好好記住。掛載的時候，會在組件的之前調用，在元素塞入頁面以后調用。下一節中我們將介紹小書掛載階段的組件生命周期二。

React.js 小書 Lesson18 - 掛載階段的組件生命周期（一）

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson18

轉載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

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

ReactDOM.render(
 , 
  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 (
      
        React 小書
      
    )
  }
}

在控制臺你可以看到依次輸出：

可以看到，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 (
      
        {this.state.isShowHeader ?  : null}
        
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

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

...
{this.state.isShowHeader ?  : 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 元素從頁面中刪除之前調用。

但這一節并沒有講這幾個方法到底在實際項目當中有什么作用，下一節我們通過例子來講解一下這幾個方法的用途。

下一節中我們將介紹《React.js 小書 Lesson19 - 掛載階段的組件生命周期（二）》。

GPU云服務器云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89685.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業簡單的入門級別的小書，提供給社區。本書的后續可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson19 - 掛載階段的組件生命周期（二）

摘要：多次的隱藏和顯示會讓重新構造和銷毀組件，每次構造都會重新構建一個定時器。而銷毀組件的時候沒有清除定時器，所以你看到報錯會越來越多。例如清除該組件的定時器和其他的數據清理工作。下一節中我們將介紹小書更新階段的組件生命周期。 React.js 小書 Lesson19 - 掛載階段的組件生命周期（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/re...

Dogee 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson25 - 實戰分析：評論功能（四）

摘要：接下來是實戰環節，我們會繼續上一階段的例子，把評論功能做得更加復雜一點。把已經發布的評論持久化，存放到瀏覽器的中。評論顯示發布日期，如秒前，分鐘前，并且會每隔秒更新發布日期。事件監聽方法，。下一節中我們將介紹小書實戰分析評論功能五。 React.js 小書 Lesson25 - 實戰分析：評論功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升

摘要：在實際項目當中狀態提升并不是一個好的解決方案，所以我們后續會引入這樣的狀態管理工具來幫助我們來管理這種共享狀態，但是在講解到之前，我們暫時采取狀態提升的方式來進行管理。 React.js 小書 Lesson17 - 前端應用狀態管理 —— 狀態提升本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson17 轉載請注明出處，保留原...

newtrek 2019-08-21 17:34 評論0 收藏0