【React】歸納篇（六）元件物件的生命週期 | 例項 | 虛擬DOM與DOM Diff演算法

阿新 • • 發佈：2018-12-09

元件物件的生命週期

元件物件的生命週期，指的是從元件物件產生到銷燬的過程。

如下圖所示: 這裡寫圖片描述

生命週期的回撥函式：你定義了，你沒有呼叫，但是這個函式卻執行了。如render()函式。也稱為生命週期的“鉤子函式”。

透明度改變動畫-例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta 
 http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test1"></div>


    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js" 
></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
    //1、定義類元件
    class Life extends  React.Component {
        constructor(props) {
            super(props);
            //初始化狀態 

            this.state = {
                opacity: 1
            }
            this.distroyComponent = this.distroyComponent.bind(this);
        }
        distroyComponent() {
            ReactDOM.unmountComponentAtNode(document.getElementById('test1'));

        }

        componentDidMount() {
            //啟動迴圈定時器
            this.id_interval = setInterval(function(){
                console.log(1);
                let {opacity} = this.state;
                opacity -= 0.1;
                if(opacity<=0){
                    opacity = 1;
                }
                this.setState({opacity});
            }.bind(this),200)
        }
        componentWillUnmount() {//元件將被解除安裝前觸發
            clearInterval(this.id_interval);
        }
        render() {
            const {opacity} = this.state;
            //{{物件}}與{JS程式碼}的區別
            return (
                <div>
                    <h2 style={{opacity:opacity}}>{this.props.msg}</h2>
                    <button onClick={this.distroyComponent}>Click Me to unmount the component</button>
                </div>
            )
        }
    }
    //2、渲染元件
    ReactDOM.render(<Life msg="元件物件的生命週期"/>,document.getElementById('test1'));
    </script>
</body>
</html>

小結下，元件物件的生命週期流程分為3個階段：

1、第一次初始化渲染顯示：ReactDOM.render() ，只會執行一次

constructor():建立物件初始化state
componentWillMount():將要插入回撥
render():用於插入虛擬DOM回撥
componentDidMount():已經插入回撥

2、每次更新：state.this.setState() ，可以執行N次

componentWillUpdate() 將要更新回撥
render() 更新，進行重新渲染
componentDidUpdate() 已經更新回撥

3、移除元件：ReactDOM.unmountComponentAtNode(containerDOM)，只會執行一次

componentWillUnmount():元件將要被移除回撥

總的來說，有4個鉤子比較重要：

render
componentDidMount
componentWillUnmount
componentWillReceiveProps

聯想下人的生命週期，從“出生-成長-死亡”，其實很類似這樣的過程。

虛擬DOM與DOM Diff演算法

DOM Diff 演算法：只更新需要更新的部分。虛擬DOM：在操作介面的過程中，介面是不會變的。

元件初始化過程：

1、建立虛擬DOM樹
2、生成真實DOM樹
3、繪製介面顯示

思考：更新時，如何做到最小化重繪：

1、setState()更新狀態
2、重新建立虛擬DOM樹
3、新/舊樹比較差異
4、更新差異對應真實DOM
5、區域性進行重繪

【React】歸納篇（六）元件物件的生命週期 | 例項 | 虛擬DOM與DOM Diff演算法

元件物件的生命週期元件物件的生命週期，指的是從元件物件產生到銷燬的過程。如下圖所示: 生命週期的回撥函式：你定義了，你沒有呼叫，但是這個函式卻執行了。如render()函式。也稱為生命週期的“鉤子函式”。透明度改變動畫-例項 <!D

【React】歸納篇（七）React腳手架 | 寫一個表單

React 腳手架腳手架：用來幫助程式設計師快速建立一個基於某種庫的模板專案。其包括：所有需要的配置指定的所有的依賴可以直接安裝/編譯/執行的簡單效果 React 提供了用於建立react專案的腳手架庫：create-react-app,使用這

【React】歸納篇（三）模組與元件以及模組化與元件化-概念與基本使用

慨念模組：向外提供特定功能的JS檔案，便於複用JS，簡化JS，提升JS效率資料、對資料的操作（函式）、將想暴露的私有的函式向外暴露（暴露的資料型別是物件）模組化：形容專案編碼方式，即按

React】歸納篇（十）元件間通訊方式之Redux | UI元件AntDesign | Redux-react

react-router4 react-router概覽 1、react的一個外掛庫 2、專門用於實現一個SPA應用 3、基於react的專案都會用到該庫 SPA 1、點選頁面中的連結不會重新整理頁面，本身也不會向伺服器傳送請求 2、點選路由連結時，只會發

【轉】SVM入門（六）線性分類器的求解——問題的轉化，直觀角度

content cli 樣本 image ges 五個是你角度 spa SVM入門（六）線性分類器的求解——問題的轉化，直觀角度讓我再一次比較完整的重復一下我們要解決的問題：我們有屬於兩個類別的樣本點（並不限定這些點在二維空間中）若幹，如圖，圓形的樣本點定為正樣

【轉】JMeter學習（三）元件的作用域與執行順序

ces ner 處理器規則 fig 子節點控制器 conf 節點 1.元件的作用域 JMeter中共有8類可被執行的元件（測試計劃與線程組不屬於元件），這些元件中，取樣器是典型的不與其它元件發生交互作用的元件，邏輯控制器只對其子節點的取樣器有效，而其它元件（config

【機房報修管理系統】後端篇（六）配置Cros解決跨域問題

一、前情提要上一次我們使用了MyBatisGenerator解決了實體層和Dao層的開發，這一次我們來解決Cros跨域問題。二、任務詳情配置Cros攔截器三、相關介紹 1.什麼是跨

【PP生產訂單】入門介紹（六）

訂單的有效性（可用性）檢查：是要系統自動幫我們做還是我們手動操作，這個需要後臺進行配置。可用性檢查這裡有兩個選項： 1、建立時候檢查 2、下達時候檢查那麼系統以什麼方式進行檢查呢？這裡是通過“Checking Group檢查群組”和“

【一起來學React】- Reudx學習（二）

上篇文章我們說到redux一些基礎和在react中如何運用。本文講解在react中如何更加優雅的編寫redux！上一篇文章地址：https://blog.csdn.net/Fakin/article/details/85287116 非同步Action 在redu

【計算機視覺】雙目測距（六）--三維重建及UI顯示

原文： http://blog.csdn.NET/chenyusiyuan/article/details/5970799 在獲取到視差資料後，利用 OpenCV 的 reProjectImageTo3D 函式結合 Bouquet 校正方法得到的 Q 矩陣就可以得到環

【學生資訊管理系統】——優化篇（二）

優化內容 3、查詢資訊窗體——check複選框介面簡潔、設計美觀，提供給使用者需要的、滿足使用者的需求，給使用者帶來方便。所以，我在查詢資訊的窗體中，對於選查詢方式，這部分做了一些改動。當載入完窗體時，因為使用者還沒有選擇查詢方式，為使介面簡潔，滿足使用者所需

【學生資訊管理系統】優化篇（四）

前言為了給使用者更好的體驗，作為“程式猿”的我們需要不斷的優化我們的小程式。在優化過程中，不斷的發現問題、解決問題，方可得到很大的提升。過程 1、在MDI窗體裡顯示當前日期和時間（運用的控制元件StatusBar） 1） Private Sub

【官網翻譯】效能篇（十）效能提示

前言本文翻譯自Android開發者官網的一篇文件，主要用於介紹app開發中效能優化的一實踐要點。中國版官網原文地址為：https://developer.android.google.cn/tr

【朝花夕拾】Handler篇（二）

前言轉載請宣告，轉自【https://www.cnblogs.com/andy-songwei/p/11438492.html】，謝謝。 Handler的身影總是時不時出現在工作，筆試，面試中，可見其

【系統解讀】SystemUI篇（一）SystemUI啟動流程

前言 SystemUI是系統啟動中第一個使用者肉眼可見的應用，其功能包羅永珍，比如開機後看到的鎖屏介面，充電時充電介面，狀態列，導航欄，多工欄等，都是與Android手機使用者息息相關的功能。所以不止SystemUI開發者，普通的應用開發者也很有必要去了解

【模板】負環（spfa）

sizeof 貪心 com image 一行 clas 存在 cst -m 洛谷——P3385 【模板】負環題目描述暴力枚舉/SPFA/Bellman-ford/奇怪的貪心/超神搜索輸入輸出格式輸入格式：第一行一個正整數T表

linux操作系統基礎篇（六）

linux操作系統 linux服務 images without 重新修改文件內容請求用戶訪問 linux服務篇 1.samba服務的搭建 samba的功能： samba是一個網絡服務器，用於Linux和Windows之間共享文件。2. samba服務的啟動、停止、

【模板】矩陣加速（數列）

cst opera name 結果 ++ 取余 int 數列 names 題目描述 a[1]=a[2]=a[3]=1 a[x]=a[x-3]+a[x-1] (x>3) 求a數列的第n項對1000000007（10^9+7）取余的值。輸入輸出格式輸入格式：第一行一

【leetcode】Word Break（python）

條件 text for -m 是我 tex eas sso false 思路是這種。我們從第一個字符開始向後依次找，直到找到一個斷句的地方，使得當前獲得的子串在dict中，若找到最後都沒找到。那麽就是False了。在找到第一個後，接下來找下一個斷句處，當然是從第

【轉】JMeter學習（四）參數化

一個 ngx adr conf 英文逗號 .net 註意 itl ron JMeter也有像LR中的參數化，本篇就來介紹下JMeter的參數化如何去實現。參數化：錄制腳本中有登錄操作，需要輸入用戶名和密碼，假如系統不允許相同的用戶名和密碼同時登錄，或者想更好的模擬多個

【React】歸納篇（六）元件物件的生命週期 | 例項 | 虛擬DOM與DOM Diff演算法

元件物件的生命週期

透明度改變動畫-例項

虛擬DOM與DOM Diff演算法

相關推薦