我不明白为什么每个反应安装方法都会在控制台中记录两次?

我试图查看安装生命周期方法的执行顺序。因此,当我在每种方法中使用console.log时,前三个方法在console中记录两次,我认为由于该组件仅使用一次,因此应该仅记录一次。 这是我写的代码:

import React, { Component } from 'react'

class LifecycleA extends Component {

    constructor(props) {
        super(props)

        this.state = {
             name: 'Sam'
        }
        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>
                LifecycleA
            </div>
        )
    }
}

export default LifecycleA

我在控制台中得到以下输出:

LifeCycleA Constructor
LifeCycleA Constructor
LifecycleA getDerivedStateFromProps
LifecycleA getDerivedStateFromProps
LifecycleA render
LifecycleA render
LifecycleA ComponentDidMount

我不明白为什么前三个功能记录两次?

评论