Question

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

例如，在应用程序的所有组件的每个 console.log('Component is mounted')上添加一个ComponentDidMount，而不必在每个组件中都进行定义（作为装饰例如），就像该方法的全局扩展程序一样，向其添加了一些代码。像这样：Extending Vue Lifecycle Hooks，但用于React。

任何人都有实现该想法的想法？干杯！

Answer 1

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

示例：

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

export default withMountHOC;

在您的应用程序组件中：

const WrappedApp = withMountHOC(App);
ReactDOM.render(
  WrappedApp,
  document.getElementById('root')
);

由于父 componentDidMount挂钩在 child componentDidMount挂钩之后被调用，因此 HOC {{1} }将应用于组件的任何嵌套级别。

您可能也有兴趣查看此博客：Replacing Mixins in React。

Answer 2

创建 CustomComponent.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

现在创建扩展 CustomComponent.js

的 MyComponent.js

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

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

export default MyComponent;

现在您看到控制台，您的日志为："component is mounted"

但是，如果您在componentDidMonunt()中写入MyComponent.js，则会从 MyComponent.js

获取日志

扩展React生命周期挂钩（例如在每个ComponentDidMount上添加一条打印语句）

2 个答案: