成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React專題：生命周期

Hanks10100 / 3391人閱讀

摘要：而生命周期鉤子，就是從生到死過程中的關(guān)鍵節(jié)點。異步渲染下的生命周期花了兩年時間祭出渲染機制。目前為這幾個生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個大活寶。生命周期鉤子的最佳實踐是在這里初始化。

本文是『horseshoe·React專題』系列文章之一，后續(xù)會有更多專題推出
來我的 GitHub repo 閱讀完整的專題文章
來我的 個人博客 獲得無與倫比的閱讀體驗

生命周期，顧名思義，就是從生到死的過程。

而生命周期鉤子，就是從生到死過程中的關(guān)鍵節(jié)點。

普通人的一生有哪些生命周期鉤子呢？

出生

考上大學(xué)

第一份工作

買房

結(jié)婚

生子

孩子的生命周期鉤子

退休

臨終遺言

每到關(guān)鍵節(jié)點，我們總希望有一些沉思時刻，因為這時候做出的決策會改變?nèi)松淖呦颉?/p>

React組件也一樣，它會給開發(fā)者一些沉思時刻，在這里，開發(fā)者可以改變組件的走向。

異步渲染下的生命周期

React花了兩年時間祭出Fiber渲染機制。

簡單來說，React將diff的過程叫做Reconciliation。以前這一過程是一氣呵成的，F(xiàn)iber機制把它改成了異步。異步技能將在接下來的版本中逐步解鎖。

明明是一段同步代碼，怎么就異步了呢？

原理是Fiber把任務(wù)切成很小的片，每執(zhí)行一片就把控制權(quán)交還給主線程，待主線程忙完手頭的活再來執(zhí)行剩下的任務(wù)。當(dāng)然如果某一片的執(zhí)行時間就很長(比如死循環(huán))，那就沒主線程什么事了，該崩潰崩潰。

這會給生命周期帶來什么影響呢？

影響就是掛載和更新之前的生命周期都變的不可靠了。

為什么這么講？因為Reconciliation這個過程有可能暫停然后繼續(xù)執(zhí)行，所以掛載和更新之前的生命周期鉤子就有可能不執(zhí)行或者多次執(zhí)行，它的表現(xiàn)是不可預(yù)期的。

因此16之后的React生命周期迎來了一波大換血，以下生命周期鉤子將被逐漸廢棄：

componentWillMount

componentWillReceiveProps

componentWillUpdate

看出特點了么，都是帶有will的鉤子。

目前React為這幾個生命周期鉤子提供了別名，分別是：

UNSAFE_componentWillMount

UNSAFE_componentWillReceiveProps

UNSAFE_componentWillUpdate

React17將只提供別名，徹底廢棄這三個大活寶。取這么個別名意思就是讓你用著惡心。

constructor()

React借用class類的constructor充當(dāng)初始化鉤子。

React幾乎沒做什么手腳，但是因為我們只允許通過特定的途徑給組件傳遞參數(shù)，所以constructor的參數(shù)實際上是被React規(guī)定好的。

React規(guī)定constructor有三個參數(shù)，分別是props、context和updater。

props是屬性，它是不可變的。

context是全局上下文。

updater是包含一些更新方法的對象，this.setState最終調(diào)用的是this.updater.enqueueSetState方法，this.forceUpdate最終調(diào)用的是this.updater.enqueueForceUpdate方法，所以這些API更多是React內(nèi)部使用，暴露出來是以備開發(fā)者不時之需。

在React中，因為所有class組件都要繼承自Component類或者PureComponent類，因此和原生class寫法一樣，要在constructor里首先調(diào)用super方法，才能獲得this。

constructor生命周期鉤子的最佳實踐是在這里初始化this.state。

當(dāng)然，你也可以使用屬性初始化器來代替，如下：

import React, { Component } from "react";

class App extends Component {
    state = {
        name: "biu",
    };
}

export default App;
componentWillMount()

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96935.html

相關(guān)文章

  • React專題：可變狀態(tài)

    摘要：的參數(shù)既可以是一個對象，也可以是一個回調(diào)函數(shù)?；卣{(diào)函數(shù)提供了兩個參數(shù)，第一個參數(shù)就是計算過的對象，即便這時還沒有渲染，得到的依然是符合直覺的計算過的值。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個人博客 獲得無與倫比的閱讀體驗 Reac...

    hosition 評論0 收藏0

  • JS專題之垃圾回收

    摘要：如果沒有引用指向該對象零引用，對象將被垃圾回收機制回收。經(jīng)過增量標(biāo)記改進(jìn)后，垃圾回收的最大停頓時間可以減少到原來的左右。解除引用的真正作用是讓值脫離執(zhí)行環(huán)境，以便垃圾收集器下次運行時將其回收。 前言 在講 JS 的垃圾回收（Garbage Collection）之前，我們回顧上一篇《JS專題之memoization》，memoization 的原理是以參數(shù)作為 key，函數(shù)結(jié)果作為 v...

    liujs 評論0 收藏0

  • React專題：什么是UI

    摘要：現(xiàn)代前端框架的使命就是開發(fā)者管理狀態(tài)，框架根據(jù)狀態(tài)自動生成。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個人博客 獲得無與倫比的閱讀體驗 什么是UI？ 如果你指的是布局和色彩，那更偏向于設(shè)計師的工作。 在現(xiàn)代web領(lǐng)域，大家已經(jīng)有一個共識...

    silvertheo 評論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會作為回調(diào)函數(shù)的第一個參數(shù)返回。使用最常見的用法就是傳入一個對象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。 面試中問框架，經(jīng)常會問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時卻答不上來，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

    darcrand 評論0 收藏0

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關(guān)注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<