当子类继承并挂载父类时，父类是否运行生命周期方法?

React, Does parent class run lifecycle method when a child class inherit it and mounted?

本文关键字：父类 运行 是否 生命 周期 方法 继承 子类      更新时间：2023-09-26

我知道Child组件可以调用BaseComponent setTitle方法。

但是，当Child组件挂载时，BaseComponent的生命周期方法componentDidMount似乎不会执行。

class BaseComponent extends React.Component{
    componentDidMount() {
       console.log('baseComponent componentDidMount')
    }
  
    setTitle(title) {
      document.title = title || 'default title'
    }
}
class Child extends BaseComponent{
    constructor() {
        super();
    }
  
    componentDidMount() {
        this.setTitle();
        console.log('child componentDidMount')
    }
  
    render() {
        return <div>react is awesome</div>
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

我也知道也许HOC是更好的解决方案。如果使用es5, mixins是最好的方法。但这不是我的问题。那么，是否可以执行BaseComponent生命周期方法

应该避免继承。就像你说的，HOC是正确的选择…你可以用super来调用父类:

class Child extends BaseComponent{
    componentDidMount() {
        super.componentDidMount(); // Call the parent class
        this.setTitle();
        console.log('child componentDidMount')
    }
    render() {
        return <div>react is awesome</div>
    }
}
相关文章：