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

pf_miles 發(fā)布于2019-08-21 17:34 / 3441人閱讀

摘要：我們把將組件渲染，并且構(gòu)造元素然后塞入頁(yè)面的過程稱為組件的掛載這個(gè)定義請(qǐng)好好記住。掛載的時(shí)候，會(huì)在組件的之前調(diào)用，在元素塞入頁(yè)面以后調(diào)用。下一節(jié)中我們將介紹小書掛載階段的組件生命周期二。

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

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

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

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

我們?cè)谥v解 JSX 的章節(jié)中提到，下面的代碼：

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

會(huì)編譯成：

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

其實(shí)我們把 Header 組件傳給了 React.createElement 函數(shù)，又把函數(shù)返回結(jié)果傳給了 ReactDOM.render。我們可以簡(jiǎn)單猜想一下它們會(huì)干什么事情：

// React.createElement 中實(shí)例化一個(gè) Header
const header = new Header(props, children)
// React.createElement 中調(diào)用 header.render 方法渲染組件的內(nèi)容
const headerJsxObject = header.render()

// ReactDOM 用渲染后的 JavaScript 對(duì)象來來構(gòu)建真正的 DOM 元素
const headerDOM = createDOMFromObject(headerJsxObject)
// ReactDOM 把 DOM 元素塞到頁(yè)面上
document.getElementById("root").appendChild(headerDOM)

上面過程其實(shí)很簡(jiǎn)單，看代碼就能理解。

我們把 React.js 將組件渲染，并且構(gòu)造 DOM 元素然后塞入頁(yè)面的過程稱為組件的掛載（這個(gè)定義請(qǐng)好好記?。?。其實(shí) React.js 內(nèi)部對(duì)待每個(gè)組件都有這么一個(gè)過程，也就是初始化組件 -> 掛載到頁(yè)面上的過程。所以你可以理解一個(gè)組件的方法調(diào)用是這么一個(gè)過程：

-> constructor()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面

這當(dāng)然是很好理解的。React.js 為了讓我們能夠更好的掌控組件的掛載過程，往上面插入了兩個(gè)方法：

-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()

componentWillMount 和 componentDidMount 都是可以像 render 方法一樣自定義在組件的內(nèi)部。掛載的時(shí)候，React.js 會(huì)在組件的 render 之前調(diào)用 componentWillMount，在 DOM 元素塞入頁(yè)面以后調(diào)用 componentDidMount。

我們給 Header 組件加上這兩個(gè)方法，并且打一些 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 小書
      
    )
  }
}

在控制臺(tái)你可以看到依次輸出：

可以看到，React.js 確實(shí)按照我們上面所說的那樣調(diào)用了定義的兩個(gè)方法 componentWillMount 和 componentDidMount。

機(jī)靈的同學(xué)可以想到，一個(gè)組件可以插入頁(yè)面，當(dāng)然也可以從頁(yè)面中刪除。

-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()
// ...
// 從頁(yè)面中刪除

React.js 也控制了這個(gè)組件的刪除過程。在組件刪除之前 React.js 會(huì)調(diào)用組件定義的 componentWillUnmount：

-> constructor()
-> componentWillMount()
-> render()
// 然后構(gòu)造 DOM 元素插入頁(yè)面
-> componentDidMount()
// ...
// 即將從頁(yè)面中刪除
-> componentWillUnmount()
// 從頁(yè)面中刪除

看看什么情況下會(huì)把組件從頁(yè)面中刪除，繼續(xù)使用上面例子的代碼，我們?cè)俣x一個(gè) 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 組件，并且有一個(gè)按鈕，可以控制 Header 的顯示或者隱藏。下面這行代碼：

...
{this.state.isShowHeader ?  : null}
...

相當(dāng)于 state.isShowHeader 為 true 的時(shí)候把 Header 插入頁(yè)面，false 的時(shí)候把 Header 從頁(yè)面上刪除。這時(shí)候我們給 Header 添加 componentWillUnmount 方法：

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

這時(shí)候點(diǎn)擊頁(yè)面上的按鈕，你會(huì)看到頁(yè)面的標(biāo)題隱藏了，并且控制臺(tái)打印出來下圖的最后一行，說明 componentWillUnmount 確實(shí)被 React.js 所調(diào)用了：

你可以多次點(diǎn)擊按鈕，隨著按鈕的顯示和隱藏，上面的內(nèi)容會(huì)按順序重復(fù)地打印出來，可以體會(huì)一下這幾個(gè)方法的調(diào)用過程和順序。

總結(jié)

React.js 將組件渲染，并且構(gòu)造 DOM 元素然后塞入頁(yè)面的過程稱為組件的掛載。這一節(jié)我們學(xué)習(xí)了 React.js 控制組件在頁(yè)面上掛載和刪除過程里面幾個(gè)方法：

componentWillMount：組件掛載開始之前，也就是在組件調(diào)用 render 方法之前調(diào)用。

componentDidMount：組件掛載完成以后，也就是 DOM 元素已經(jīng)插入頁(yè)面后調(diào)用。

componentWillUnmount：組件對(duì)應(yīng)的 DOM 元素從頁(yè)面中刪除之前調(diào)用。

但這一節(jié)并沒有講這幾個(gè)方法到底在實(shí)際項(xiàng)目當(dāng)中有什么作用，下一節(jié)我們通過例子來講解一下這幾個(gè)方法的用途。

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

GPU云服務(wù)器云服務(wù)器線程的生命周期 bug的生命周期 activity的生命周期 ios應(yīng)用的生命周期

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89685.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

pf_miles

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Transition 實(shí)現(xiàn)輪播圖

閱讀 2475·2019-08-30 15:52
pt，px，rem和em之間區(qū)別總結(jié)

閱讀 2265·2019-08-30 12:51
一批面試記錄

閱讀 2866·2019-08-29 18:41
移動(dòng)端下彈框禁止背景滑動(dòng)

閱讀 2849·2019-08-29 17:04
es6讓操作unicode字符集更加簡(jiǎn)單

閱讀 844·2019-08-29 15:11
CSS Grid布局：合并單元格布局

閱讀 1777·2019-08-28 18:02
如何結(jié)合npm做一個(gè)前端腳手架

閱讀 3632·2019-08-26 10:22
Object 對(duì)象的相關(guān)方法

閱讀 2537·2019-08-26 10:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

React 小書

相關(guān)文章

**寫一本關(guān)于 React.js 的小書**

React.js 小書 Lesson20 - 更新階段的組件生命周期

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

React.js 小書 Lesson25 - 實(shí)戰(zhàn)分析：評(píng)論功能（四）

React.js 小書 Lesson17 - 前端應(yīng)用狀態(tài)管理 —— 狀態(tài)提升

發(fā)表評(píng)論

0條評(píng)論

pf_miles

男|高級(jí)講師

TA的文章

Transition 實(shí)現(xiàn)輪播圖

pt，px，rem和em之間區(qū)別總結(jié)

一批面試記錄

移動(dòng)端下彈框禁止背景滑動(dòng)

es6讓操作unicode字符集更加簡(jiǎn)單

CSS Grid布局：合并單元格布局

如何結(jié)合npm做一個(gè)前端腳手架

Object 對(duì)象的相關(guān)方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

React 小書

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！