react中 类与继承的应用

假设有一个需求：所有组件加载的时候都有一个loading；那么我们可以这样实现；写一个loading 组件作为 基类 ，然后所有组件 继承它；

loading组件 作为基类

import React,{Component} from 'react';
import ReactDOM from 'react-dom'

class LoadingComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={
            loading : false
        }
    }
    render(){
        const { loading } = this.state;
        return(
            <div>
                {loading ? 'loading...' :''}
            </div>
        )
    }
    showLoading(){
        this.setState({
            loading:true
        })
    }
    hideLoading(){
        this.setState({
            loading:false
        })
    }
}
export default LoadingComponent;

app组件 继承 loading组件

import React,{Component} from 'react';
import ReactDOM from 'react-dom'
import Loading from './loading/index'
import LoadingComponent from './LoadingComponent/index'
class App extends LoadingComponent{
 constructor(props){
    super(props);
    this.state={
      data:[],
      loading:false
    }
 }
 componentDidMount(){
  this.showLoading()
  
  setTimeout(()=>{
    this.hideLoading();
  },2000)
 }
  render(){
    return(
      <div>app
        {super.render()}
      </div>
    )
  }
}

export default App

其中 app 的render 会覆盖 父类loading的render；
所以 在app 的render中 必须 再次调用 父类render; {super.render()}