React类组件里面的各种问题浅析

浅析React类组件

React类组件（组件名首字母大写）

//创建类组件		组件名首字母大写
class  MyCom extends React.Component {
   
    render(){
   
        return (
            <div>类组件</div>
        )
    }
}
let com=<MyCom/>
ReactDOM.render(com,document.getElementById('app'));

react类组件的构造方法 constructor()：

constructor(props){
   
    super(props);               
    this.state = {
   
    }
}

• constructor必须用super()初始化this，可以绑定事件到this

• 如果你在constructor中要使用this.props，就必须给super加参数，super(props)；

  • constructor(){
           
        super();               
        this.state = {
           
            xxx:this.props.xxx//构造函数里面用到了props
        };
    }//这里如果在construct()和super()中不传入props参数，则会报错
    //因为这里使用super()是重写了父类的构造函数（父类的构造函数本来是super(props,context)）
    

• 无论有没有constructor()，重写的构造函数中参数有没有props，render()中都可以使用this.props， 默认自带

• 如果组件没有声明constructor,react会默认添加一个空的constructor。

  • class News extends React.Component {
           
        render() {
           
            return (
                <div>
                    new组件:{
           this.props.text}
                    <p>{
           this.state.text}</p>
                </div>
    		)
    	}
    }
    //如果在继承时，子类中如果没有声明constructor，js会自动生成添加constructor并且调用父类的构造函数
    //这里是父类的构造函数是super(props,context)，并不是super()如果写super()则是不完全使用父类构造函数方法。
    

• ES6采用的是先创建父类的实例this（故要先调用 super( )方法），完后再用子类的构造函数修改this

constructor( )-----super( )的基本含义

constructor( )——构造方法

这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。
并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

super( ) ——继承

在class方法中，继承是使用 extends 关键字来实现的。
子类必须在 constructor( )调用 super( )方法，否则新建实例时会报错。
(如果子类没有显示定义构造方法，js则会默认加上构造方法并且里面用super自动调用父类的构造方法)
即：
class son extends father{
	constructor(){
		super()
	}
}
如果父类构造方法里面含参数，子类没有显示定义构造方法