React生命周期

Dongjie_Liu 發布于2019-08-20 18:09 / 1348人閱讀

摘要：前言組件的生命周期可以分為掛載，渲染和卸載這幾個階段。因此，可以把生命周期分成兩類當組件在掛載或卸載時。因此，當方法返回的時候，組件不再向下執行生命周期方法。父節點改變當父節點改變，傳入子組件的發生改變，組件會依次調用子組件會重新渲染。

前言

React組件的生命周期可以分為掛載，渲染和卸載這幾個階段。
當渲染后的組件需要更新時，我們會重新去渲染組件，直至卸載。
因此，可以把React生命周期分成兩類：
1.當組件在掛載或卸載時。
2.當組件接收新的數據時，即組件更新時。

一.掛載或卸載過程

1.組件初始化

static defaultProps保證this.props有初始值
this.state初始值
componentWillMount會在render之前調用，componentDidMount會在render之后調用，分別代表了渲染前后的時刻，
都只執行一次。
render之后，我們在componentDidMount中執行setState,組件會再次render,不過在初始化過程就渲染了兩次組件
，這并不是一件好事，但實際情況是，有些場景不得不需要setState,比如計算組件的位置或寬高等，就不得不讓組件
先渲染，更新必要的信息后，再次渲染。

2.組件的卸載：
componentWillMount,我們常常會執行一些清理方法，如事件回收或是清除定時器。

    componentWillMount() {
        this.setState({
            a: this.state.a + 1    // 先執行willMount，a + 1，再執行render,componentDidMount
        });
        console.log("will" + this.state.a);
    }
    componentDidMount() {
        console.log("did" + this.state.a);
    }
    render() {
        console.log("render" + this.state.a);
        return (
            
                
                { this.state.a }
                { this.props.maxLoops }
                
            
        );
    }

二.數據更新過程

1.數據更新過程：
更新過程指的是父組件向下傳遞props或組件自身執行setState方法時發生的一系列更新動作。
如果組件自身state更新了，那么會依次執行shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate。
shouldComponentUpdate是一個特別的方法，它接受需要更新的props和state,讓開發者增加必要的條件判斷，
讓其在需要時更新，不需要時不更新。因此，當方法返回false的時候，組件不再向下執行生命周期方法。
2.父節點props改變
當父節點this.state改變，傳入子組件的this.props發生改變，組件會依次調用componentWillReceiveProps,
shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.
子組件會重新渲染。
3.如果組件是由父組件更新props而更新的，那么在shouldComponentUpdate之前會執行componentWillReceiveProps方法，此方法可以作為React在props傳入后，渲染之前setState機會，在此方法中setState是不會二次渲染的。

componentWillReceiveProps(nextProps) {
        console.log("willreceive");
        console.log(nextProps);
        if (nextProps.id === 4) {
            this.setState({
                bb: 1000
            })
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("should update");
        if (nextState.bb === 16) {
            return false;
        }
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("will update");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("did update");
    }

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

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

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

React專題：生命周期

摘要：而生命周期鉤子，就是從生到死過程中的關鍵節點。異步渲染下的生命周期花了兩年時間祭出渲染機制。目前為這幾個生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個大活寶。生命周期鉤子的最佳實踐是在這里初始化。本文是『horseshoe·React專題』系列文章之一，后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個人博客獲得無與倫比的閱讀體驗生命周期...

Hanks10100 2019-08-23 11:25 評論0 收藏0
捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用，只跟實例的創建有關。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評論0 收藏0
ReactV16.3，即將更改的生命周期

摘要：我們目前的計劃是為不安全生命周期引入別名，和。從現在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應更改的推薦方法是使用新的靜態生命周期。注釋：本文是根據React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對之前生命周期所出現的問題的總結，之后的React將逐步棄用一些生命周期和...

wendux 2019-08-22 16:28 評論0 收藏0
React組件生命周期詳解

摘要：組件生命周期構造方法是對類的默認方法，通過命令生成對象實例時自動調用該方法。該生命周期可以發起異步請求，并。后廢棄該生命周期，可以在中完成設置渲染組件是一個組件必須定義的生命周期，用來渲染。該生命周期內可以進行。 React組件生命周期 constructor( ) 構造方法 constructor是ES6對類的默認方法，通過 new 命令生成對象實例時自動調用該方法。并且，該方法是...

learn_shifeng 2019-08-22 17:31 評論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對于組件更新階段的組件生命周期，我們簡單提及并且提供一些資料給大家。這里為了知識的完整，補充關于更新階段的組件生命周期你可以通過這個方法控制組件是否重新渲染。大家對這更新階段的生命周期比較感興趣的話可以查看官網文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評論0 收藏0
React組件生命周期

摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。每個生命周期階段調用的鉤子函數會略有不同。 React組件生命周期此文章適合 React@17 之前的版本，React@16.3.0，添加了一些新的生命周期函數，同時準備廢棄一些會造成困擾的生命周期函數。所有如果在React@17 發布之前，這篇文章還是適用的。新的生命周期請看官...

mgckid 2019-08-20 10:42 評論0 收藏0