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