我想在 React 应用程序的给定生命周期挂钩上添加一些行为。
例如，增加一个console.log('Component is mounted')对每 ComponentDidMount一个应用程序的所有组件，而不必在它们中的每一个来定义它（如例如一个装饰），有点像，增加了一些代码，认为方法的全球剂。像这样：扩展 Vue Lifecycle Hooks但用于 React。
任何人都知道如何实现这一目标？干杯!
扩展 React 生命周期钩子（例如在每个 ComponentDidMount 上添加一个打印语句）
IT技术
reactjs
2021-05-28 05:35:10
2个回答
您可以使用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钩后称为子 componentDidMount钩，所述HOC componentDidMount将在组件的任何嵌套级别应用。
你可能也有兴趣查看这个博客：Replaceing Mixins in React。
创建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得到日志