一篇讀懂React、vue框架的生命周期函數(shù)
原文合集地址如下，有需要的朋友可以關(guān)注
本文地址
合集地址
當(dāng)涉及到前端框架時(shí)，React 和 Vue.js 是兩個(gè)非常受歡迎的選擇。它們都提供了強(qiáng)大的工具和功能，幫助開發(fā)者構(gòu)建交互式的、可擴(kuò)展的應(yīng)用程序。在這兩個(gè)框架中，生命周期函數(shù)是一個(gè)重要的概念，它們?cè)试S我們?cè)诮M件的不同階段執(zhí)行特定的代碼。
React 和 Vue.js 的生命周期函數(shù)提供了一種組件生命周期管理的機(jī)制，讓我們能夠在組件的創(chuàng)建、更新和銷毀等不同階段執(zhí)行特定的操作。這些函數(shù)包括在組件實(shí)例化、掛載到DOM、更新、卸載等過程中被自動(dòng)調(diào)用，使我們能夠在關(guān)鍵時(shí)刻對(duì)組件進(jìn)行控制和操作。
在本篇博客中，我們將深入探討 React 和 Vue.js 中的生命周期函數(shù)。我們將學(xué)習(xí)每個(gè)框架中不同生命周期階段的函數(shù)，并了解它們的執(zhí)行順序和用途。我們將探索生命周期函數(shù)的重要性，以及如何使用它們來處理數(shù)據(jù)加載、狀態(tài)管理、DOM 操作以及其他常見的開發(fā)任務(wù)。
無(wú)論你是 React 還是 Vue.js 的開發(fā)者，理解生命周期函數(shù)是非常重要的，它們可以幫助你編寫更可靠、高效的代碼。通過掌握這些函數(shù)，你將能夠更好地管理組件的狀態(tài)、響應(yīng)用戶交互，并優(yōu)化應(yīng)用程序的性能。
在本博客中，我們將提供詳細(xì)的示例代碼和解釋，幫助你理解 React 和 Vue.js 中各個(gè)生命周期函數(shù)的作用和用法。無(wú)論你是新手還是有經(jīng)驗(yàn)的開發(fā)者，我們相信這篇博客將為你提供寶貴的知識(shí)和指導(dǎo)，讓你更加熟悉和自信地使用 React 和 Vue.js 的生命周期函數(shù)。
Vue.js 生命周期：
圖文解釋
beforeCreate：在實(shí)例初始化之后、數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。
created：實(shí)例已經(jīng)創(chuàng)建完成，進(jìn)行數(shù)據(jù)觀測(cè) (data observer)，屬性和方法的運(yùn)算，但還沒有掛載到 DOM 上。
beforeMount：在模板編譯/掛載之前被調(diào)用，相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted：實(shí)例已經(jīng)掛載到 DOM 上后被調(diào)用，可以訪問到 DOM 元素。
beforeUpdate：數(shù)據(jù)更新時(shí)，在重新渲染之前被調(diào)用。
updated：數(shù)據(jù)更新并重新渲染后被調(diào)用。
beforeDestroy：實(shí)例銷毀之前被調(diào)用，可以在這個(gè)階段進(jìn)行一些清理工作。
destroyed：實(shí)例已經(jīng)銷毀后被調(diào)用，所有的事件監(jiān)聽器和子組件都被移除。
舉例說明
在Vue中，當(dāng)刷新瀏覽器時(shí)，Vue實(shí)例的完整聲明周期過程如下：
new?Vue({
??beforeCreate()?{
????console.log('beforeCreate');
??},
??created()?{
????console.log('created');
??},
??beforeMount()?{
????console.log('beforeMount');
??},
??mounted()?{
????console.log('mounted');
??},
??beforeUpdate()?{
????console.log('beforeUpdate');
??},
??updated()?{
????console.log('updated');
??},
??beforeDestroy()?{
????console.log('beforeDestroy');
??},
??destroyed()?{
????console.log('destroyed');
??},
});
在瀏覽器刷新時(shí)，控制臺(tái)將按照以下順序打印生命周期函數(shù)的信息：
beforeCreate: 在Vue實(shí)例被創(chuàng)建之前觸發(fā)。
created: 在Vue實(shí)例被創(chuàng)建之后觸發(fā)，此時(shí)Vue實(shí)例已經(jīng)完成了數(shù)據(jù)觀測(cè)、屬性和方法的配置。
beforeMount: 在Vue實(shí)例掛載到DOM元素之前觸發(fā)。
mounted: 在Vue實(shí)例掛載到DOM元素之后觸發(fā)，此時(shí)可以操作DOM元素。
beforeUpdate: 在Vue實(shí)例更新之前觸發(fā)，此時(shí)數(shù)據(jù)已經(jīng)發(fā)生了變化。
updated: 在Vue實(shí)例更新之后觸發(fā)，此時(shí)DOM已經(jīng)更新完成。
beforeDestroy: 在Vue實(shí)例銷毀之前觸發(fā)，可以進(jìn)行一些清理操作。
destroyed: 在Vue實(shí)例銷毀之后觸發(fā)，此時(shí)Vue實(shí)例已經(jīng)被完全銷毀。
注意，刷新瀏覽器會(huì)觸發(fā)Vue實(shí)例的重新創(chuàng)建和掛載過程，因此會(huì)依次觸發(fā)beforeCreate、created、beforeMount和mounted生命周期函數(shù)的信息。更新和銷毀階段的生命周期函數(shù)不會(huì)在刷新瀏覽器時(shí)被觸發(fā)。
React 生命周期：
圖文解釋
constructor：組件實(shí)例化時(shí)調(diào)用，用于初始化 state 和綁定方法。
static getDerivedStateFromProps：在組件實(shí)例化和更新過程中調(diào)用，用于根據(jù) props 更新 state。
render：根據(jù)當(dāng)前的 state 和 props 渲染組件的 UI。
componentDidMount：組件掛載后調(diào)用，可以進(jìn)行 DOM 操作、網(wǎng)絡(luò)請(qǐng)求等副作用操作。
shouldComponentUpdate：決定組件是否需要重新渲染。
getSnapshotBeforeUpdate：在組件更新之前獲取當(dāng)前的 DOM 狀態(tài)，常用于保存滾動(dòng)位置等操作。
componentDidUpdate：組件更新后調(diào)用，可以進(jìn)行 DOM 操作、網(wǎng)絡(luò)請(qǐng)求等副作用操作。
componentWillUnmount：組件銷毀前調(diào)用，用于清理定時(shí)器、取消網(wǎng)絡(luò)請(qǐng)求等操作。
舉例說明
在React中，當(dāng)刷新瀏覽器時(shí)，React組件的完整生命周期過程如下：
class?MyComponent?extends?React.Component?{
??constructor(props)?{
????super(props);
????console.log('constructor');
??}
??componentDidMount()?{
????console.log('componentDidMount');
??}
??componentDidUpdate()?{
????console.log('componentDidUpdate');
??}
??componentWillUnmount()?{
????console.log('componentWillUnmount');
??}
??render()?{
????console.log('render');
????return?(
??????<div>
????????{/*?JSX內(nèi)容?*/}
??????</div>
????);
??}
}
在瀏覽器刷新時(shí)，控制臺(tái)將按照以下順序打印生命周期函數(shù)的信息：
constructor: 組件的構(gòu)造函數(shù)，在組件實(shí)例化時(shí)被調(diào)用，用于初始化組件的狀態(tài)和綁定方法。
render: 組件的渲染函數(shù)，在組件渲染時(shí)被調(diào)用，返回JSX元素用于構(gòu)建DOM結(jié)構(gòu)。
componentDidMount: 組件掛載到DOM節(jié)點(diǎn)之后被調(diào)用，可以進(jìn)行DOM操作、網(wǎng)絡(luò)請(qǐng)求等副作用操作。
componentDidUpdate: 組件更新完成后被調(diào)用，可以處理組件更新時(shí)的額外邏輯。
componentWillUnmount: 組件即將從DOM節(jié)點(diǎn)中卸載時(shí)被調(diào)用，可以進(jìn)行一些清理操作，如取消訂閱、清除定時(shí)器等。 注意，刷新瀏覽器時(shí)，React組件的完整生命周期過程只包括constructor、render和componentDidMount。componentDidUpdate和componentWillUnmount等生命周期函數(shù)將在組件更新和卸載過程中觸發(fā)，而不會(huì)在刷新瀏覽器時(shí)被調(diào)用。
