关于 React 中的生命周期钩子

Question

我有一个高阶组件如下。我很难理解首先安装哪个。见下文：

主要组成部分（添加员工）

import React, {useEffect} from 'react';

const AddEmployee = (props) => {

    useEffect(()=>{
        console.log("USE EFFECT");
    },[])

    return (//SOME JSX)
}

export default GlobalAxiosHandler(AddEmployee);

高阶分量

import React, { Component } from 'react';

const GlobalAxiosHandler = (WrappedComponent) => {

    return class extends Component {

        componentDidMount () {
            console.log('GLOBAL COMPONENTDIDMOUNT');
        }

     render() {

            console.log("RENDER GLOBAL");
            return (
                <React.Fragment>
                    <WrappedComponent {...this.props}></WrappedComponent>
                </React.Fragment>)
        }
    }

}

控制台输出如下

RENDER GLOBAL
GLOBAL COMPONENTDIDMOUNT
USE EFFECT

我的问题是：由于包装组件作为 HOC 的子组件，因此 HOC 的 componentDidMount() 应该在包装组件中的 useEffect() 之后执行。在这种情况下，输出应该如下所示：

RENDER GLOBAL
USE EFFECT
GLOBAL COMPONENTDIDMOUNT

但相反的事情发生了。你能解释一下为什么吗？希望我已经正确表达了它。

编辑：当我也在 HOC 中使用钩子时，如下所示（在 HOC 和 Wrapped 组件中使用 HOOKS）：

import React, { useEffect, Component } from 'react';

const GlobalAxiosHandler = (WrappedComponent, axios) => {

    const GlobalAxiosHandlerInner = (props) => {

        useEffect(()=>{
            console.log("USE EFFECT HOC");
        })

            return (
                <React.Fragment>
                    <WrappedComponent {...props}></WrappedComponent>
                </React.Fragment>)
    }

  return GlobalAxiosHandlerInner;
}

export default GlobalAxiosHandler;

我看到的输出如下（如我所料）：

USE EFFECT WRAPPER  //(THIS IS FROM THE WRAPPED COMPONENT)
USE EFFECT HOC

能否请您解释一下为什么会发生生命周期事件的逆转？

Answer 1

useEffect 等同于 componentDidMount（还有 didUpdate 和 willUnmount）所以它只在第一次渲染后被调用，这正是正在发生的事情：

render 来自 HOC
render形式WrappedComponent
ComponentDidMount 来自 HOC
useEffect 来自 WrappedComponent

控制台输出应该是：

RENDER GLOBAL
GLOBAL COMPONENTDIDMOUNT
USE EFFECT

这里没有发生任何错误

关于 React 中的生命周期钩子

About lifecycle hooks in React

reactjs

react-hooks