為什麼前端框架 react vue 裡會出現生命週期的說法?

時間 2021-05-06 07:02:40

1樓:

「生命週期」只是為了方便描述乙個東西的出現與消失,這是乙個概念的東西。

或者這麼說,只要是執行的程式,程式裡的萬物都活在它的生命週期裡。

2樓:

這個概念來自於OOP。

乙個物件從被建立到銷毀必然經歷多個狀態,在對應狀態裡做該做的事,這就是生命週期。

這玩意在其他地方十年前就玩爛了。

3樓:緋一

生命週期對於框架的開發者而言,是保障框架本身拓展性的一種設計方式

React 先定義了怎樣管理元件是好的,再在這樣的思想下,解構出元件的行為與特徵,比如元件是可被建立、掛載、渲染、更新和解除安裝的乙個 f(x),只要具備這些特徵,就是乙個 React 元件,再通過具體的生命週期來實施這些約束

這樣框架本身的複雜度就是收斂的,並且除此之外差異化的部分,也能通過填生命週期的洞來完成,框架就兼具了約束性與拓展性

4樓:伊撒爾

但是和問題相反,其實我是不支援生命週期的。

為什麼不呢?還是要從非同步渲染說起

現在除了 react 已經很多框架上非同步渲染了,比如我寫的 fre ,還有一些大點的,stencil 啥的

非同步渲染中,生命週期是阻礙,什麼意思,是因為你不知道怎麼安排這些生命週期

同步渲染中,父元件總是比子元件先渲染,但是非同步渲染就不一樣了,最多就是父元件先開始渲染

甚至還有 susponse 這種暫停機制,也會打破生命週期

而且從宣告式的角度來思考,生命週期很明顯是告訴我們什麼時機做什麼事,是乙個過程,是乙個我先做什麼再做什麼的過程

宣告式一般都不會關注這種過程,通常它就是生命做乙個事情,怎麼做,做的順序它不管

所以,現在很多框架作者都提出,【生命週期不是必要】的觀點

在最新的 react hooks 中,也使用了 useEffect 來更好的囊括生命週期的概念

所以,這個問題其實問法有點不對,react 巴不得移除生命週期呢

5樓:方應杭

設計模式之 RAII 模式。

RAII 模式的全稱是 Resource acquisition is initialization,中文翻譯為「資源獲取即初始化」。

假設你要操作乙個檔案資源,那麼你可以建立乙個物件,這個物件的建構函式就是開啟對應的資源,這個物件的析構函式就是銷毀對應的資源占用。以此來避免「物件銷毀了,資源卻還被你占用著」的尷尬。

這個想法最早是在 C++ 裡被廣泛使用的(至少我搜到的資料是這麼寫的)。

而前端不過是在此基礎再進一步,把 DOM 當做資源,把 vm / component 作為物件。

建立 vm / component 物件時,DOM 資源就準備就緒。

銷毀 vm / component 物件時,DOM 資源就掃除乾淨。

更新 vm / component 物件時,DOM 資源也跟著更新。

由於 DOM 資源還分 in memory 和 in dom tree,所以不得不區分 created 和 mounted 兩種情況。

總而言之,前端沒有新鮮事。

6樓:ijrys

並不只是前端框架涉及這個概念

基本所有的oo的語言都有這個概念

生命週期就是乙個實體從建立到銷毀的這一整個過程,以c#為例,就是從記憶體的占有到釋放,必然涉及到的倆函式乙個是建構函式,乙個是析構函式

其實這個概念在程式所涉及的型別越來越複雜時自然而然就形成了

7樓:Blake Jy

其實本質上是框架提供乙個切入點,讓使用者能在框架內部執行時某個地方被執行的時候呼叫使用者自定義的方法。

為什麼叫生命週期?當這個切入點帶入時序的概念就叫生命週期了。

舉個例子:

人有童年,青少年,中年,老年幾個時期

童年的切入點自定義了乙個方法是學程式設計

青少年的切入點自定義了乙個方法是找工作

中年的切入點自定義了乙個方法是植髮

老年的切入點自定義了乙個方法是享樂

同樣地在對data和props defineReactive之前提供了beforeCreate的切入點

在data和props defineReactive後提供了created的切入點

在vnode patch之前提供了beforeMount的切入點

在vnode patch生成dom後提供了mounted的切入點

等等為什麼框架需要定義這些切入點?

因為在UI上,你確實很需要在某個元素從無到有,從有到變,從變到無的過程中去做一些操作取悅使用者。

8樓:張振衣

寬泛點說 axios 也有生命週期。在請求各個狀態提供了各個鉤子適時呼叫。

瀏覽器也有週期,你可以在 rAF 注入邏輯,以及 promise.then 在 fulfill 時刻被呼叫執行。

再往大了說,軟體也有生命週期,你是敏捷的還是瀑布的,每個階段幹每個階段的事。

生命週期和鉤子是兩回事,而鉤子一定是鉤進生命週期裡的。setTimeout 鉤到瀏覽器事件迴圈裡Button onChange 鉤到元件裡本質都是乙個受生命週期控制、在特定條件、特定時刻呼叫的乙個作用的宣告

9樓:zanxas

額,生命週期在遊戲開發界是很常見的東西。

遊戲開發中,會頻繁地建立和銷毀遊戲物件。

也許前端需求已經發展到了需要頻繁建立銷毀物件的程度。

10樓:Ivony

簡單說就是因為需要動態建立介面UI元素,就產生了動態銷毀介面UI元素的需求。否則UI元素只增不減遲早拖死應用。

有了建立和銷毀自然就有了生命週期,因為有些事情需要在建立後才能做,有些事情要在銷毀的時候做。

沒錯,如果不需要動態建立介面UI元素,例如只是切換幾個固定的展示頁面,或者固定的表單什麼的。那麼通常也就不需要動態銷毀介面UI元素,而使用顯示和隱藏來解決。這也是早期前端UI沒有生命週期或者說很少提及生命週期的原因……

11樓:winter

宇宙有成住壞空,

人有生老病死,

元件有create mount unmount destroy,這不是很正常嘛?

要學會用發展的眼光看問題,要認識到運動是絕對的,元件不是一成不變的。

12樓:

生命週期主要是:

方便開發人員在應用程式執行的不同階段對程式的處理和了解狀態框架需要管理由框架建立出來的物件,不然記憶體會洩漏等問題不同框架有不同的生命週期,這是由框架實現原理和給使用框架的開發人員提供的鉤子功能決定的

13樓:山上有虎

目的都是為了提供一系列的鉤子讓你能進行自定義,就像jquery 裡面使用事件提供鉤子。類庫裡面把事件換成生命週期能更語義化、直觀的表達鉤子的使用時機。

14樓:清水

其實不光react、vue,iOS、android、Windows程式框架mfc等其他開發也有生命週期的東西。一般框架會提供一些生命週期有關的函式給程式設計師做一些操作。

15樓:Frank1e

window.onLoad,DOMContentLoaded,Document.ReadyState什麼的…能對照呼應一下吧?

乙個XHR也有變化狀態的過程。onReadyStateChange,0,1,2,3,4。這個也可以對照呼應一下吧。

這就是個舉一反三的事,想想,多想想……身邊的事情。

16樓:袁羽銘

手機打的,排版不太好,見諒。

不知道你指的是元件的生命週期還是應用本身的生命週期。元件的生命週期是因為spa本身的雙向繫結等機制,會讓你的頁面渲染有多個階段,比如一般都會有的compile階段,只把插值表示式渲染到指定div裡,並未渲染框架相關的元件或插值,然後再進行框架本身相關元件和插值的解析。當然實際會比這複雜些。

並且頁面渲染完成和對應的js作用域渲染完成的時機可能也不一樣。

然而,你的需求會要求有些邏輯寫在頁面渲染完成的階段,有些邏輯需要寫在框架還未介入的階段(需求相對較少),有些訂閱的觀察者可能需要在元件銷毀時一起銷毀。

當然,應用本身的生命週期也一樣,有些配置需要你在vue剛剛bootstrap結束就執行,有些邏輯需要你在重新整理頁面也就是應用銷毀前執行。

從哪來的概念我不知道,但是需求很多,並且也給開發人員提供了在不同時機操作框架(或元件)不同階段的能力。

所謂生命週期,只是框架(元件)不同時期執行的鉤子而已。

前端框架如何入門?

sunny 很多前端框架都是有文件的,學習官方文件 教程。而且很多時候都會有一些例項可以參考的。最開始可以按照官網上的文件一步一步來,把官網上的教程以及相關的例項都自己實現一下,然後對於你要具體使用的那一部分在深入學習了解。然後也可以試著用你學的框架去做一些小專案來鍛鍊自己。 靳洪飛 學習前端好困惑...

現代前端框架 例如Vue 為什麼選擇 資料劫持 實現資料雙向繫結

召伯樹 ko 通過 ko.observable 生成了乙個物件的 handle,然後通過這個 handle 可以進行賦值 取值操作。這原理上與 vue 的 defineProperties 定義 getter setter 並無區別。只不過乙個是顯示轉化而乙個是隱式的。顯然 vue 隱式的要好,用過...

如何評價前端框架Yox?

文藝程式設計師 Vue學習成本已經很低了。感覺記不住Vue常用API的程式設計師,可以選擇轉行了。乙個 乙個 而已。然後v if,v for。已經很簡單了。造輪子是好事,當興趣和找找成就感提公升程式設計能力可以。看誰誰不順眼就不對了,畢竟還借鑑了人家的思路。不過本著善意的態度,還是希望作者越來越好。...