类式组件 - 小璇妙妙屋

类

<script type="text/javascript">
class Person{
constructor(name,age){
//构造器方法
//构造器中的this是类的实例对象
this.name=name
this.age=age
}
//一般方法
speak(){
//speak方法放在了类的原型对象上，供实例使用
console.log(`我叫$(this.name),我的年龄是$(this.age)`)
}
}
class Student extends Person{
    constructor(name,age,grade){
        super(name,age)
        this.grade=grade;
    }
    speak(){
        console.log(`我叫${this.name},我的年龄是${this.age},我的年纪是${this.grade}`)
    }
}
const p1=new Person('tom',18)
const p2=new Person('jerry',19)
const s1=new Student('zhang',15,'高一')
p1.speak()
p2.speak()
s1.speak()
</script>

注：

1、类的构造器不是一定要写的

2、如果a类继承于b类，且a类中写了构造器，则a类构造器中super必须要调用。

3、类定义的方法，都放在类的原型对象上，共实例使用

创建类组件

<script type="text/babel">
class MyComponent extends React.Component{
//这里Component的c要大写
//render是放在MyComponent原型对象上，供实例使用的
render(){
return{
//render中的this是MyComponent的实例对象
<h2>我是类定义的组件</h2>
}
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>