关于有状态组件中的super(props),1.为什么要使用super();2.为什么要传入props?
有状态组件例如:
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<Header/> //也可以写成<Header></Header>
)
}
}
1.为什么要使用super()?
调用super()
方法来获取子类(Home
)的实例。也就是说,仅仅声明Home
是一个类,无法获得使用Home时<Home/>
的属性props。有一个方法解决这个问题,那就是从<Home/>
的父类React.Component
那里去访问。因此需要用到Es6类的继承,这就需要super()
来实现。
super()
允许访问和调用父类中的成员,它会调用一次父类的构造函数。必须在使用this
前调用。
2.为什么要传入props?
Home
子类中要通过this
使用React.Component
的props
对象,同样也需要继承,这需要super(props)
来完成。也就是说,通过super(props)
得到了this
对象。此时,construtor()
中的this
指向子类。
其实我们也可以不传props
,这时无法通过this
来访问。可以通过形参props.xx
来访问。
总之,如果不传入
props
,我们将无法访问子组件实例传过来的props。
我们进一步讨论以下问题,3.为什么construtor()中,state可以通过this访问;4.为什么在render()中使用this时,不需要使用super()或者先绑定呢。
3.为什么construtor()中,state可以通过this访问?
与props不同,this.state={}
是在定义Clock原型上的对象,因此是可以直接使用this的。
4.为什么在render()中使用this时,不需要使用super()或者先绑定呢?
无论有没有constructor
中的一系列this
的继承操作, render中都可以使用this.props
, react
默认自带。这是因为render是原型上的方法,使用this
当然可以。打印出原型,我们可以看到render
是一个函数,而constructor
是一个类。
【总结】 construtor()中props参数和super中的props同时传,但不是必须的。如果你不在构造函数中用this.props和props,完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的,所以写哪个都可以。