react类式组件
一、类知识回顾
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>