一、类知识回顾
class是es6新增的用于创建对象模板的关键字
创建一个类
//类名首字母要大写
class Person {
//当创建一个没有继承任何父类的类时，需要编写constructor函数来为类的实例对象添加属性
constructor(name,age){
this.name=name
this.age=age
}
//定义类的方法时，不能使用function关键字，而是直接定义
eat(){
console.log(‘我要吃饭饭！！！’)
}
}
//创建一个Person实例
const p1 = new Person(‘李华’,19)
console.log(p1.name,p1.age)
p1.eat()
继承一个类
class Student extends Person(){
constructor(name,age,grade){
//当定义一个继承自其它类的类时，如果有自己独立的属性（父类没有），需要写constructor函数，传入父类所定义的参数，并且需要调用super函数
super(name,age)
//所有与this有关的操作都要写到super函数之后
this.grade=grade
}
}
const s1 = new Student('小芳'，18，‘高三’）
console.log(s1.name,s1.age,s1.grade)
s1.eat()
二、类式组件
同样的，使用类式组件需要引入React、React-DOM库以及babel
创建的类式组件继承React里面定义的Component类，调用render方法，将要显示的内容用return返回，最后使用ReactDOM.render渲染组件到容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>类式组件</title> </head> <body> <div class="test"></div> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //创建类式组件 //必须继承React.Component这个类 class MyComponent extends React.Component { //必须写render函数 //render是放在类的实例对象上的，供实例使用 render() { //render函数里面必须有返回值 return (<h1> 类创建的复杂组件</h1 >) } } //这里的render和类组件里面的render函数没有任何关系，只是重名而已 ReactDOM.render(<MyComponent />, document.querySelector('.test')) //react解析组件标签，找到了组件 //发现该组件是使用类定义的，于是创建了一个该对象的实例，并通过该实例调用原型链上的render方法 //将render返回的虚拟DOM转为真实DOM呈现在页面中 </script> </body> </html>
