資訊專欄INFORMATION COLUMN
摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關(guān)于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。
React.js 小書 Lesson20 - 更新階段的組件生命周期
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson20
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
從之前的章節(jié)我們了解到，組件的掛載指的是將組件渲染并且構(gòu)造 DOM 元素然后插入頁面的過程。這是一個從無到有的過程，React.js 提供一些生命周期函數(shù)可以給我們在這個過程中做一些操作。
除了掛載階段，還有一種“更新階段”。說白了就是 setState 導(dǎo)致 React.js 重新渲染組件并且把組件的變化應(yīng)用到 DOM 元素上的過程，這是一個組件的變化過程。而 React.js 也提供了一些列的生命周期函數(shù)可以讓我們在這個組件更新的過程執(zhí)行一些操作。
這些生命周期在深入項目開發(fā)階段是非常重要的。而要完全理解更新階段的組件生命周期是一個需要經(jīng)驗和知識積累的過程，你需要對 Virtual-DOM 策略有比較深入理解才能完全掌握，但這超出了本書的目的。本書的目的是為了讓大家快速掌握 React.js 核心的概念，快速上手項目進行實戰(zhàn)。所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。
這里為了知識的完整，補充關(guān)于更新階段的組件生命周期：
shouldComponentUpdate(nextProps, nextState)：你可以通過這個方法控制組件是否重新渲染。如果返回 false 組件就不會重新渲染。這個生命周期在 React.js 性能優(yōu)化上非常有用。
componentWillReceiveProps(nextProps)：組件從父組件接收到新的 props 之前調(diào)用。
componentWillUpdate()：組件開始重新渲染之前調(diào)用。
componentDidUpdate()：組件重新渲染并且把更改變更到真實的 DOM 以后調(diào)用。
大家對這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。
但這里建議大家可以先簡單了解 React.js 組件是有更新階段的，并且有這么幾個更新階段的生命周期即可。然后在深入項目實戰(zhàn)的時候逐漸地掌握理解他們，現(xiàn)在并不需要對他們放過多的精力。
有朋友對 Virtual-DOM 策略比較感興趣的話，可以參考這篇博客：深度剖析：如何實現(xiàn)一個 Virtual DOM 算法 。對深入理解 React.js 核心算法有一定幫助。
下一節(jié)中我們將介紹《React.js 小書 Lesson21 - ref 和 React.js 中的 DOM 操作》。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89683.html
摘要：因為工作中一直在使用，也一直以來想總結(jié)一下自己關(guān)于的一些知識經(jīng)驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進行許可 React.js 小書 本文作者：胡子大哈本文原文：React.js 小書 轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息 在線閱讀：http://huzi...
摘要：多次的隱藏和顯示會讓重新構(gòu)造和銷毀組件，每次構(gòu)造都會重新構(gòu)建一個定時器。而銷毀組件的時候沒有清除定時器，所以你看到報錯會越來越多。例如清除該組件的定時器和其他的數(shù)據(jù)清理工作。下一節(jié)中我們將介紹小書更新階段的組件生命周期。 React.js 小書 Lesson19 - 掛載階段的組件生命周期（二） 本文作者：胡子大哈本文原文：http://huziketang.com/books/re...
摘要：我們把將組件渲染，并且構(gòu)造元素然后塞入頁面的過程稱為組件的掛載這個定義請好好記住。掛載的時候，會在組件的之前調(diào)用，在元素塞入頁面以后調(diào)用。下一節(jié)中我們將介紹小書掛載階段的組件生命周期二。 React.js 小書 Lesson18 - 掛載階段的組件生命周期（一） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson18 轉(zhuǎ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...
摘要：所以我們給評論組件加上刪除評論的功能，這樣就可以刪除不想要的評論了。輸入這是代碼塊，這是正常內(nèi)容。到目前為止，第二階段的實戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。下一節(jié)中我們將介紹小書高階組件。 React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson27 ...
閱讀 1407·2021-11-24 10:20
閱讀 3649·2021-11-24 09:38
閱讀 2294·2021-09-27 13:37
閱讀 2196·2021-09-22 15:25
閱讀 2270·2021-09-01 18:33
閱讀 3488·2019-08-30 15:55
閱讀 1783·2019-08-30 15:54
閱讀 2081·2019-08-30 12:50
