Reactjs 扩展React生命周期挂钩（例如，在每个组件上添加打印语句）

我想在React应用程序的给定生命周期挂钩上添加一些行为

例如，在应用程序所有组件的上添加

console.log（'Component is mount'）

，而不必在每个组件中定义它（例如，作为装饰器），有点像该方法的全局扩展程序，向其添加一些代码。像这样：但是为了反应

有人对如何实现这一目标有想法吗？干杯

您可以使用。在根应用程序中，应用高阶组件

例如：

const withMountHOC = WrappedComponent => {
  return class extends Component {
    componentDidMount() {
      console.log('mounted');
    }
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

export default withMountHOC;

由于在子钩子钩子后调用父钩子，所以将在组件的任何嵌套级别应用HOC

---

---

您可能还想看看这个博客：。

createCustomComponent.js

import React, { Component } from 'react'

class CustomComponent extends Component {
    constructor(props){
        super();
    }

    componentDidMount(){
        console.log('component is mounted');
    }

    render () {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default CustomComponent

import React, { Component } from 'react'
import CustomComponent from './CustomComponent'

class MyComponent extends CustomComponent {
    render () {
        return (
            <div>
                Hello from MyComponent
            </div>
        )
    }
}

export default MyComponent;

import React，{Component}来自“React”
类CustomComponent扩展组件{
建造师（道具）{
超级（）；
}
componentDidMount（）{
console.log（“组件已安装”）；
}
渲染（）{
返回(
{this.props.children}
)
}
}
导出默认自定义组件

现在创建扩展CustomComponent.js的MyComponent.js

import React, { Component } from 'react'

class CustomComponent extends Component {
    constructor(props){
        super();
    }

    componentDidMount(){
        console.log('component is mounted');
    }

    render () {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default CustomComponent

import React, { Component } from 'react'
import CustomComponent from './CustomComponent'

class MyComponent extends CustomComponent {
    render () {
        return (
            <div>
                Hello from MyComponent
            </div>
        )
    }
}

export default MyComponent;

import React，{Component}来自“React”
从“./CustomComponent”导入CustomComponent
类MyComponent扩展了CustomComponent{
渲染（）{
返回(
来自MyComponent的您好
)
}
}
导出默认MyComponent；

现在您看到控制台，您有日志：

“组件已安装”

---

但如果您在

MyComponent.js

中编写

componentdidmonut（）

，您将从MyComponent.js

中获得日志，这是一个非常好且非常有用的问题，让我想想：）

import React, { Component } from 'react'

class CustomComponent extends Component {
    constructor(props){
        super();
    }

    componentDidMount(){
        console.log('component is mounted');
    }

    render () {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

export default CustomComponent

import React, { Component } from 'react'
import CustomComponent from './CustomComponent'

class MyComponent extends CustomComponent {
    render () {
        return (
            <div>
                Hello from MyComponent
            </div>
        )
    }
}

export default MyComponent;