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的子组件，因此应在包装的组件中的useEffect（）之后执行HOC的componentDidMount（）。在这种情况下，输出应如下所示：

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中的生命周期挂钩

1 个答案: