国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Dogee / 1954人閱讀

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

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

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

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

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

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

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

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

  render () {
    return (
      

        

          
現(xiàn)在的時間是

          {this.state.date.toLocaleTimeString()}
        

      

    )
  }
}

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

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

當然在我們這個例子里面是定時器的啟動，我們給 Clock 啟動定時器：

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

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

我們在 componentWillMount 中用 setInterval 啟動了一個定時器：每隔 1 秒更新中的 state.date，這樣頁面就可以動起來了。我們用一個 Index 把它用起來，并且插入頁面：

class Index extends Component {
  render () {
    return (
      

        
      

    )
  }
}

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

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

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)在頁面上有個按鈕可以顯示或者隱藏時鐘。你試一下顯示或者隱藏時鐘，雖然頁面上看起來功能都正常，在控制臺你會發(fā)現(xiàn)報錯了：

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

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

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

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

這時候就沒有錯誤了。

總結(jié)

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89684.html

相關(guān)文章

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

    摘要：我們把將組件渲染，并且構(gòu)造元素然后塞入頁面的過程稱為組件的掛載這個定義請好好記住。掛載的時候，會在組件的之前調(diào)用，在元素塞入頁面以后調(diào)用。下一節(jié)中我們將介紹小書掛載階段的組件生命周期二。 React.js 小書 Lesson18 - 掛載階段的組件生命周期（一） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson18 轉(zhuǎn)載請注...

    pf_miles 評論0 收藏0

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

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

    Scorpion 評論0 收藏0

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

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

    Yumenokanata 評論0 收藏0

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

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

    mozillazg 評論0 收藏0

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

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

    newtrek 評論0 收藏0

發(fā)表評論

0條評論

Dogee

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<