国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React專題：生命周期

Hanks10100 / 3361人閱讀

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

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

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

而生命周期鉤子，就是從生到死過程中的關鍵節點。

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

出生

考上大學

第一份工作

買房

結婚

生子

孩子的生命周期鉤子

退休

臨終遺言

每到關鍵節點，我們總希望有一些沉思時刻，因為這時候做出的決策會改變人生的走向。

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

異步渲染下的生命周期

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

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

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

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

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

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

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

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

componentWillMount

componentWillReceiveProps

componentWillUpdate

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

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

UNSAFE_componentWillMount

UNSAFE_componentWillReceiveProps

UNSAFE_componentWillUpdate

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

constructor()

React借用class類的constructor充當初始化鉤子。

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

React規定constructor有三個參數，分別是props、context和updater。

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

context是全局上下文。

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

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

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

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

import React, { Component } from "react";

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

export default App;
componentWillMount()

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96935.html

相關文章

  • React專題：可變狀態

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

    hosition 評論0 收藏0

  • JS專題之垃圾回收

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

    liujs 評論0 收藏0

  • React專題：什么是UI

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

    silvertheo 評論0 收藏0

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

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

    darcrand 評論0 收藏0

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

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

    kumfo 評論0 收藏0

發表評論

0條評論

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