浅析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()
}
}
如果父类构造方法里面含参数,子类没有显示定义构造方法