关于 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 和包装组件中使用钩子(：

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
• render形式WrappedComponent
• 来自HOC 的ComponentDidMount
• useEffect从WrappedComponent

控制台输出应为：

RENDER GLOBAL
GLOBAL COMPONENTDIDMOUNT
USE EFFECT

这里没有发生任何错误