亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Dogee / 2020人閱讀

摘要：多次的隱藏和顯示會(huì)讓重新構(gòu)造和銷毀組件，每次構(gòu)造都會(huì)重新構(gòu)建一個(gè)定時(shí)器。而銷毀組件的時(shí)候沒有清除定時(shí)器，所以你看到報(bào)錯(cuò)會(huì)越來越多。例如清除該組件的定時(shí)器和其他的數(shù)據(jù)清理工作。下一節(jié)中我們將介紹小書更新階段的組件生命周期。

React.js 小書 Lesson19 - 掛載階段的組件生命周期（二） 
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson19

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

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

這一節(jié)我們來討論一下對(duì)于一個(gè)組件來說，constructor 、componentWillMount、componentDidMount、componentWillUnmount 這幾個(gè)方法在一個(gè)組件的出生到死亡的過程里面起了什么樣的作用。

一般來說，所有關(guān)于組件自身的狀態(tài)的初始化工作都會(huì)放在 constructor 里面去做。你會(huì)發(fā)現(xiàn)本書所有組件的 state 的初始化工作都是放在 constructor 里面的。假設(shè)我們現(xiàn)在在做一個(gè)時(shí)鐘應(yīng)用：

我們會(huì)在 constructor 里面初始化 state.date，當(dāng)然現(xiàn)在頁(yè)面還是靜態(tài)的，等下一會(huì)讓時(shí)間動(dòng)起來。

class Clock extends Component {
  constructor () {
    super()
    this.state = {
      date: new Date()
    }
  }

  render () {
    return (
      

        

          
現(xiàn)在的時(shí)間是

          {this.state.date.toLocaleTimeString()}
        

      

    )
  }
}

一些組件啟動(dòng)的動(dòng)作，包括像 Ajax 數(shù)據(jù)的拉取操作、一些定時(shí)器的啟動(dòng)等，就可以放在 componentWillMount 里面進(jìn)行，例如 Ajax：

...
  componentWillMount () {
    ajax.get("http://json-api.com/user", (userData) => {
      this.setState({ userData })
    })
  }
...

當(dāng)然在我們這個(gè)例子里面是定時(shí)器的啟動(dòng)，我們給 Clock 啟動(dòng)定時(shí)器：

class Clock extends Component {
  constructor () {
    super()
    this.state = {
      date: new Date()
    }
  }

  componentWillMount () {
    this.timer = setInterval(() => {
      this.setState({ date: new Date() })
    }, 1000)
  }
  ...
}

我們?cè)?componentWillMount 中用 setInterval 啟動(dòng)了一個(gè)定時(shí)器：每隔 1 秒更新中的 state.date，這樣頁(yè)面就可以動(dòng)起來了。我們用一個(gè) Index 把它用起來，并且插入頁(yè)面：

class Index extends Component {
  render () {
    return (
      

        
      

    )
  }
}

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

像上一節(jié)那樣，我們修改這個(gè) Index 讓這個(gè)時(shí)鐘可以隱藏或者顯示：

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

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

  render () {
    return (
      

        {this.state.isShowClock ?  : null }
        
      

    )
  }
}

現(xiàn)在頁(yè)面上有個(gè)按鈕可以顯示或者隱藏時(shí)鐘。你試一下顯示或者隱藏時(shí)鐘，雖然頁(yè)面上看起來功能都正常，在控制臺(tái)你會(huì)發(fā)現(xiàn)報(bào)錯(cuò)了：

這是因?yàn)椋?em>當(dāng)時(shí)鐘隱藏的時(shí)候，我們并沒有清除定時(shí)器。時(shí)鐘隱藏的時(shí)候，定時(shí)器的回調(diào)函數(shù)還在不停地嘗試 setState，由于 setState 只能在已經(jīng)掛載或者正在掛載的組件上調(diào)用，所以 React.js 開始瘋狂報(bào)錯(cuò)。

多次的隱藏和顯示會(huì)讓 React.js 重新構(gòu)造和銷毀 Clock 組件，每次構(gòu)造都會(huì)重新構(gòu)建一個(gè)定時(shí)器。而銷毀組件的時(shí)候沒有清除定時(shí)器，所以你看到報(bào)錯(cuò)會(huì)越來越多。而且因?yàn)?JavaScript 的閉包特性，這樣會(huì)導(dǎo)致嚴(yán)重的內(nèi)存泄漏。

這時(shí)候componentWillUnmount 就可以派上用場(chǎng)了，它的作用就是在組件銷毀的時(shí)候，做這種清場(chǎng)的工作。例如清除該組件的定時(shí)器和其他的數(shù)據(jù)清理工作。我們給 Clock 添加 componentWillUnmount，在組件銷毀的時(shí)候清除該組件的定時(shí)器：

...
  componentWillUnmount () {
    clearInterval(this.timer)
  }
...

這時(shí)候就沒有錯(cuò)誤了。

總結(jié)

我們一般會(huì)把組件的 state 的初始化工作放在 constructor 里面去做；在 componentWillMount 進(jìn)行組件的啟動(dòng)工作，例如 Ajax 數(shù)據(jù)拉取、定時(shí)器的啟動(dòng)；組件從頁(yè)面上銷毀的時(shí)候，有時(shí)候需要一些數(shù)據(jù)的清理，例如定時(shí)器的清理，就會(huì)放在 componentWillUnmount 里面去做。

說一下本節(jié)沒有提到的 componentDidMount 。一般來說，有些組件的啟動(dòng)工作是依賴 DOM 的，例如動(dòng)畫的啟動(dòng)，而 componentWillMount 的時(shí)候組件還沒掛載完成，所以沒法進(jìn)行這些啟動(dòng)工作，這時(shí)候就可以把這些操作放在 componentDidMount 當(dāng)中。componentDidMount 的具體使用我們會(huì)在接下來的章節(jié)當(dāng)中結(jié)合 DOM 來講。

下一節(jié)中我們將介紹《React.js 小書 Lesson20 - 更新階段的組件生命周期》。

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

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

相關(guān)文章

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

    摘要：我們把將組件渲染，并且構(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)注...

    pf_miles 評(píng)論0 收藏0

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

    摘要：因?yàn)楣ぷ髦幸恢痹谑褂茫惨恢币詠硐肟偨Y(jié)一下自己關(guān)于的一些知識(shí)經(jīng)驗(yàn)。于是把一些想法慢慢整理書寫下來，做成一本開源免費(fèi)專業(yè)簡(jiǎn)單的入門級(jí)別的小書，提供給社區(qū)。本書的后續(xù)可能會(huì)做成視頻版本，敬請(qǐng)期待。本作品采用署名禁止演繹國(guó)際許可協(xié)議進(jìn)行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...

    Scorpion 評(píng)論0 收藏0

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

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

    Yumenokanata 評(píng)論0 收藏0

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

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

    mozillazg 評(píng)論0 收藏0

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

    摘要：在實(shí)際項(xiàng)目當(dāng)中狀態(tài)提升并不是一個(gè)好的解決方案，所以我們后續(xù)會(huì)引入這樣的狀態(tài)管理工具來幫助我們來管理這種共享狀態(tài)，但是在講解到之前，我們暫時(shí)采取狀態(tài)提升的方式來進(jìn)行管理。 React.js 小書 Lesson17 - 前端應(yīng)用狀態(tài)管理 —— 狀態(tài)提升 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson17 轉(zhuǎn)載請(qǐng)注明出處，保留原...

    newtrek 評(píng)論0 收藏0

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

0條評(píng)論

Dogee

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<