react生命周期

dunizb 發布于2019-08-23 14:33 / 949人閱讀

摘要：參考資料組件的生命周期這個文檔利用的，有些陳舊。組件初始化時只調用，以后組件更新不調用，整個生命周期只調用一次，此時可以修改。

參考資料：
React：組件的生命周期
   這個文檔利用es5的creatClass，有些陳舊。需要研究兩者差別的，移步
React 生命周期
   這個過于粗暴，沒有示例

一個React組件的生命周期分為三個部分：實例化、存在期和銷毀時，如下圖：

實例化

getDefaultProps()
設置默認的props，也可以用dufaultProps設置組件的默認屬性.

getInitialState()
在使用es6的class語法時是沒有這個鉤子函數的，可以直接在constructor中定義this.state。
每一個React組件都有自己的 state，其與 props 的區別在于 state只存在組件的內部，props 在所有實例中共享。

componentWillMount()
組件初始化時只調用，以后組件更新不調用，整個生命周期只調用一次，此時可以修改state。

render()
react最重要的步驟，創建虛擬dom，進行diff算法，更新dom樹都在此進行。此時就不能更改state了。
只能通過 this.props 和 this.state 訪問數據（不能修改），也就是不能調用this.setState()。
只能出現一個頂級組件，不能返回一組元素。例如：

render(){
    //這樣不行
    this.setState({
     newState:_newState
    });
    return (
    
    //去掉下面一行
    
    );
}

componentDidMount()
組件渲染之后調用，只調用一次。

demo

import React,{Component} from "react";
import ReactDOM from "react-dom";
class Clock extends Component{

    constructor(props){
        super(props);
        this.state = {
            date:new Date()
        }
    }

    //渲染前render執行
    componentWillMount(){
        //this.timer///////////////////////////
        this.timer =setInterval(()=>{
            this.setState({
                date: new Date()
            })
        },1000)
    }
    componentDidMount(){
        this.clock.focus();
    }
    componentWillUnmount(){
        clearInterval(this.timer)
    }
    render(){
        return(
            
                
                    this.clock=clock}>now time:
                    {this.state.date.toLocaleTimeString()}
                
            
        )
    }
}
ReactDOM.render(, document.getElementById("root"));

存在期，更新操作改變

componentWillReceiveProps(nextProps)
只有props改變時調用

shouldComponentUpdate(nextProps, nextState)
react性能優化非常重要的一環。組件接受新的state或者props時調用，我們可以設置在此對比前后兩個props和state是否相同，如果相同則返回false阻止更新，因為相同的屬性狀態一定會生成相同的dom樹，這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤其是在dom結構復雜的時候

componentWillUpdata(nextProps, nextState)
組件初始化時不調用，只有在組件將要更新時才調用，此時可以修改state。

render()

componentDidUpdate()
組件初始化時不調用，組件更新完成后調用，此時可以獲取dom節點。

demo

import React from "react";
import ReactDOM from "react-dom";
class Content extends React.Component {
    constructor(){
        super();
        this.state = {
            test:0
        }
    }
    componentWillMount() {
        console.log("Component WILL MOUNT!")
    }
    componentDidMount() {
        console.log("Component DID MOUNT!")
    }
    componentWillReceiveProps(newProps) {
        console.log(newProps)
        console.log("Component WILL RECEIVE PROPS!")
    }
    shouldComponentUpdate(newProps, newState) {
        console.log(newProps,newState)
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(nextProps,nextState)
        console.log("Component WILL UPDATE!");
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(prevProps,prevState)
        console.log("Component DID UPDATE!")
    }
    componentWillUnmount() {
        console.log("Component WILL UNMOUNT!")
    }
    _handleClick(){
        this.setState({
            test:this.state.test + 1
        })
    }
    render() {
        return (
            
                {this.props.myNumber}
                點我
                {this.state.test}
            
        );
    }
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: 0};
        this.setNewNumber = this.setNewNumber.bind(this);
    }

    setNewNumber() {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
            
            
            
            
    );
    }
}
ReactDOM.render(

卸載

componentWillUnmount()
組件將要卸載時調用，一些事件監聽和定時器需要在此時清除，主要是優化性能，例子見Clock。

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100794.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