根據 react 的設計,所有的 dom 變動,都先在虛擬 dom 上發生,然後再將實際發生變動的部分,反映在真實 dom上,這種演算法叫做 dom diff
這些生命週期在深入專案開發階段是非常重要的。而要完全理解更新階段的元件生命週期是乙個需要經驗和知識積累的過程,你需要對 virtual-dom 策略有比較深入理解才能完全掌握,但這超出了本書的目的。本書的目的是為了讓大家快速掌握 react.js 核心的概念,快速上手專案進行實戰。所以對於元件更新階段的元件生命週期,我們簡單提及並且提供一些資料給大家。
但這裡建議大家可以先簡單了解 react.js 元件是有更新階段的,並且有這麼幾個更新階段的生命週期即可。然後在深入專案實戰的時候逐漸地掌握理解他們,現在並不需要對他們放過多的精力。
讓我們來看看每一條,找出哪乙個是 state。每個資料只要考慮三個問題:
它是通過 props 從父級傳來的嗎?如果是,他可能不是 state。
它隨著時間推移不變嗎?如果是,它可能不是 state。
你能夠根據元件中任何其他的 state 或 props 把它計算出來嗎?如果是,它不是 state。
原產品列表被作為 props 傳入,所以它不是 state。搜尋文字和核取方塊似乎是 state,因為它們隨時間改變並且不能由其他任何值計算出來。最後,產品的篩選列表不是 state,因為它可以通過將原始產品列表與搜尋文字和核取方塊的值組合計算出來。
最後,我們的 state 有:
使用者輸入的搜尋文字
核取方塊的值
值得注意的是, setstate 是乙個非同步方法,乙個生命週期內所有的 setstate 方法會合併操
作。關於 setstate 的實現原理,請參見 3.4 節。
有了這個特性,讓 react 變得充滿了想象力。我們完全可以只用 react 來完成對行為的控制、
資料的更新和介面的渲染。然而,隨著內容的深入,我們並不推薦開發者濫用 state,過多的內部
狀態會讓資料流混亂,程式變得難以維護。
如果我們在 componentwillmount 中執行 setstate 方法,會發生什麼呢?元件會更新 state,
但元件只渲染一次。因此,這是無意義的執行,初始化時的 state 都可以放在 this.state
如果我們在 componentdidmount 中執行 setstate 方法,又會發生什麼呢?元件當然會再次更
新,不過在初始化過程就渲染了兩次元件,這並不是一件好事。但實際情況是,有一些場景不得
不需要 setstate,比如計算元件的位置或寬高時,就不得不讓元件先渲染,更新必要的資訊後,
再次渲染。
對你應用的每乙個 state:
C 零散筆記
關於控制項 控制項實質就是乙個類 屬性中的name就是它例項後的變數名 屬性中的其他東西就是類中的變數或函式 例如 可以直接通過name.backcolor color.yellow 來直接操作控制項的背景顏色 color類 裡面封裝的大量的顏色變數 r,g,b 通過color.blue呼叫 col...
Unity零散筆記
1 預處理 在c 中的預處理功能很弱。除了使用 if else end 之外,還可以嘗試使用 system.diagnostics.conditional unity editor 這種屬性條件。2 carontefx外掛程式 這個外掛程式很好,但是不適合做遊戲,它的物理模擬應該是給做電影用的。好像...
TCP IP協議零散筆記
預設子網掩碼 255.0.0.0 乙個a類網路可提供的主機位址為16777214個,也就是2 24 2個。減去兩個的原因是主機位址全0表示本主機所連線的單個網路位址,而全1表示該網路上的所有主機。範圍 128.0.0.0 191.255.255.255 預設子網掩碼 255.255.0.0 每個b類...