react16之前的生命周期

LMou 發布于2019-08-23 17:01 / 3280人閱讀

摘要：之前后的生命周期初始化階段設置默認屬性，設置屬性校驗屬性檢查器，檢查父組件傳遞給當前組件的類型設置組件的初始化狀態父組件掛載之前父組件掛載子組件掛載中父組件掛載完成組件被更新完成后觸發。

lefecycle-React

react16之前后的生命周期

A.初始化階段：
1.設置默認屬性：

static defaultProps = {
    name: "sls",
    age:23，
     number: 0
};
//or      Counter.defaltProps={name:"sls"}

2)設置屬性校驗

`import PropTypes from "prop-types";`
屬性檢查器，檢查父組件傳遞給當前組件的類型
  static propTypes = {
    number: PropTypes.number.isRequired
  }

2.設置組件的初始化狀態

constructor() {
    super();
    this.state = {number: 0}
}

3、父組件掛載之前 componentWillMount
4 、render(父組件掛載)
5、子組件掛載中render
6、父組件掛載完成 componentDidMount
組件被更新完成后觸發。頁面中產生了新的DOM的元素，可以進行DOM操作

7、父組件是否需要更新 shouldComponentUpdate

//上一個屬性對象 上一個狀態對象
shouldComponentUpdate(prevProps,prevState){
    if(prevState.number<5){//如果新狀態的number屬性小于5的話
      return true;
    }else{
      return false;
    }
  }

8、父組件將要更新 componentWillUpdate
4、render(父組件掛載)
9、子組件將要接收到新屬性SubCounter componentWillReceiveProps
10、子組件是否需要更新 shouldComponentUpdate

shouldComponentUpdate(props,state){
    if(props.number<3){
      return true;
    }else{
      return false;
    }
  }

11、子組件將要更新 componentWillUpdate
12、子組件掛載中render
13、子組件更新完成 componentDidUpdate
8、父組件更新完成 componentDidUpdate

子組件最后一次更新：
6、父組件是否需要更新 shouldComponentUpdate
7、父組件將要更新 componentWillUpdate
4、render(父組件掛載)
9、子組件將要接收到新屬性SubCounter componentWillReceiveProps
10、子組件是否需要更新 shouldComponentUpdate
8、父組件更新完成 componentDidUpdate

一般我們通過shouldComponentUpdate()函數來優化性能：
一個React項目需要更新一個小組件時，很可能需要父組件更新自己的狀態。而一個父組件的重新更新會造成它旗下所有的子組件重新執行render()方法，形成新的虛擬DOM，再用diff算法對新舊虛擬DOM進行結構和屬性的比較，決定組件是否需要重新渲染
無疑這樣的操作會造成很多的性能浪費，所以我們開發者可以根據項目的業務邏輯，在shouldComponentUpdate()中加入條件判斷，從而優化性能
例如React中的就提供了一個PureComponent的類，當我們的組件繼承于它時，組件更新時就會默認先比較新舊屬性和狀態，從而決定組件是否更新。值得注意的是，PureComponent進行的是淺比較，所以組件狀態或屬性改變時，都需要返回一個新的對象或數組

import React from "react"
import ReactDOM from "react-dom";

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log("9、子組件將要接收到新屬性SubCounter componentWillReceiveProps");
    }

    shouldComponentUpdate(newProps, newState) {
        console.log("10、子組件是否需要更新 shouldComponentUpdate");
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log("11、子組件將要更新 componentWillUpdate");
    }

    componentDidUpdate() {
        console.log("13、子組件更新完成 componentDidUpdate");
    }

    componentWillUnmount() {
        console.log("14、子組件將卸載 componentWillUnmount");
    }

    render() {
        console.log("12、子組件掛載中render");
        return (
            {this.props.number}
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加載默認屬性
        name: "sls",
        age:23
    };

    constructor() {
        super();
        //2、加載默認狀態
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log("3、父組件掛載之前 componentWillMount");
    }

    componentDidMount() {
        console.log("5、父組件掛載完成 componentDidMount");
    }

    shouldComponentUpdate(newProps, newState) {
        console.log("6、父組件是否需要更新 shouldComponentUpdate");
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log("7、父組件將要更新 componentWillUpdate");
    }

    componentDidUpdate() {
        console.log("8、父組件更新完成 componentDidUpdate");
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log("4、render(父組件掛載)");
        return (
            
                {this.state.number}
                
                {this.state.number<10?:null}
            
        )
    }
}
ReactDOM.render(, document.getElementById("root"));

GPU云服務器云服務器線程的生命周期 bug的生命周期 activity的生命周期 ios應用的生命周期

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

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

React16時代，該用什么姿勢寫 React ?

摘要：的返回值將作為的參數，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調用，此時已更新返回值作為的第個參數一般用于獲取之前的數據語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續續迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

Reducto 2019-08-23 15:33 評論0 收藏0
捋一捋React的生命周期

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

MobService 2019-08-23 15:20 評論0 收藏0
不了解一下React16.3之后的新生命周期？

摘要：本文主要介紹之后的生命周期。該方法有兩個參數和返回值為對象不需要返回整體，把需要改變的返回即可。必須有一個返回值，返回的數據類型可以有。此生命周期主要用于優化性能。最后，說明一點這三個生命周期在未來版本中會被廢棄。 React16.3.0開始，生命周期進行了一些變化。本文主要介紹React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react組件的...

468122151 2019-08-23 15:41 評論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 Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0