React元件生命週期及元件之間的通訊

2022-04-05 14:11:52 字數 492 閱讀 7200

目錄2.元件之間的通訊

3.其它tips

名詞解釋

主要發生在使用者操作之後或父元件有更新的時候。

合理使用key屬性:

合理使用key屬性有時能減少需要頁面渲染時更新的dom節點。

如在沒有key屬性的first和second元件之間插入乙個third元件,react js的diff演算法的結果是,first元件不變,先將second元件進行刪除,然後在建立並插入third元件,最後再建立並插入second元件。

如果給上述三個元件都新增上key屬性,則演算法結果會有所改變:first元件不變,second元件不變,只是在second元件之前建立並插入來third元件。

最近在學習react native,重溫了一下react元件的生命週期及元件之間的通訊。

以上內容來自《react native入門與實踐》一書的部分讀書筆記,btw,這是一本不錯的入門書,講得很詳細。

React元件生命週期

元件的所有狀態結合起來就成了元件的生命週期。即 初始化階段 執行中階段 銷毀階段。不同生命週期內可以自定義的函式 初始化階段 getdefaultprops 獲取預設屬性,只呼叫一次,是在createclass之後呼叫的。例項之間共享引用 getinitialstate 初始化每個例項的特有初始化狀...

React元件生命週期

首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類,只呼叫一次,返回物件用於設定預設的props,對於引用值,會在例項中共享。2.getinitialstate 作用於元件的例項,在例項建立時呼叫一次,用於初始...

React 元件生命週期

在本章節中我們將討論 react 元件的生命週期。元件的生命週期可分成三個狀態 生命週期的方法有 這些方法的詳細說明,可以參考官方文件。以下例項在 hello 元件載入以後,通過 componentdidmount 方法設定乙個定時器,每隔100毫秒重新設定元件的透明度,並重新渲染 varhello...