学习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;

结果如下：

如果觉得写的不错，就用点赞来代替五星好评吧！