學習React(20) - Mounting Lifecycle 方法的介紹

在Mounting Lifecycle 方法裏,一共有四種方法,接下來會一個一個的說明。

  1. 先說 constructor(props) 方法
    A special function that will get called whenever a new component is created.
    可以用這個方法來initializing state, binding the event handlers to the class instance. 但是,這個構造函數不能cause any side effect like making Ajax calls.

  2. **static getDerivedStateFromProps(props, state)**方法
    When the state of the component depends on changes in props over time.
    在這個方法裏,比如說你可以set the state. 而且這個方法是靜態的,所有沒有this 這個關鍵字。

  3. render() 方法
    Only required method in a class component. In the render method, we simply read this.props and this.state and return the JSX which describes the UI. The render function is a pure function for the given props and state, it should always render the same UI.
    在這個方法裏,你不能做的是Do not change state or interact with DOM or make Ajax calls.
    Children components lifecycle methods are also executed.

  4. componentDidMount() 方法
    這個方法will be called only once in the whole lifecycle of a given component and it is invoked immediately after a component and all its children components have been rendered to the DOM.
    這個方法is the perfect place to cause side effects. You can interact with the DOM or perform any Ajax calls to the load data.
    This method is a good place to perform initialization that requires DOM nodes and also load data by making Network requests.

有可能大家看了上面,有點很模糊,沒關係,下面有代碼來展示,說不定有了代碼的幫助,會好理解各個的方法。


創建一個LifecycleA.js 文件,先是展示沒有children component的情況:

// LifecycleA.js
import React, { Component } from 'react'

class Lifecycle extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             name: "World"
        }
        console.log("Lifecycle constructor")
    }
    
    static getDerivedStateFromProps(props, state) {
        console.log("Lifecycle getDerivedStateFromProps")
        return null;
    }

    componentDidMount() {
        console.log("Lifecycle componentDidMount")
    }

    render() {
        console.log("Lifecycle render")
        return (
            <div>
                Lifecycle A
            </div>
        )
    }
}

export default Lifecycle

在App.js文件中:

// App.js 文件
import React from 'react';
import './App.css';
import Lifecycle from './Lifecycle'

function App() {
  return (
    <div className="App">
      <Lifecycle/>
    </div>
  );
}

export default App;

結果如下:這個結果是從瀏覽器(Chrome)中的console截取的
在這裏插入圖片描述
從這個圖片中,就能看出,他們的順序跟上面所講的順序是一樣的。


如果有children component,結果會是什麼樣子呢?
創建一個LifecycleChild.js 文件

// LifecycleChild.js 文件
import React, { Component } from 'react'

class LifecycleChild extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             name: "World"
        }
        console.log("LifecycleB constructor")
    }
    
    static getDerivedStateFromProps(props, state) {
        console.log("LifecycleB getDerivedStateFromProps")
        return null;
    }

    componentDidMount() {
        console.log("LifecycleB componentDidMount")
    }

    render() {
        console.log("LifecycleB render")
        return (
            <div>
                Lifecycle B
            </div>
        )
    }
}

export default LifecycleChild

在LifecycleA.js 文件的基礎上,稍微修改一下:

// LifecycleA.js 文件
import React, { Component } from 'react'
import LifecycleB from './LifecycleChild'

class Lifecycle extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             name: "World"
        }
        console.log("LifecycleA constructor")
    }
    
    static getDerivedStateFromProps(props, state) {
        console.log("LifecycleA getDerivedStateFromProps")
        return null;
    }

    componentDidMount() {
        console.log("LifecycleA componentDidMount")
    }

    render() {
        console.log("LifecycleA render")
        return (
            <div>
                Lifecycle A
                <LifecycleB/>
            </div>
        )
    }
}

export default Lifecycle

App.js文件還是照上面一樣:

// App.js 文件
import React from 'react';
import './App.css';
import Lifecycle from './Lifecycle'

function App() {
  return (
    <div className="App">
      <Lifecycle/>
    </div>
  );
}

export default App;

結果如下:
在這裏插入圖片描述
如果覺得寫的不錯,就用點贊來代替五星好評吧!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章