持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
类的复习
主要是要实现类的一些基本特点和用法，例如构造器，继承，封装。
类的简单用法
<!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>学习React</title>
</head>
<body>
<div id="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">
class Song{
//构造器方法
constructor(province,city){
this.province = province
this.city = city
}
//一般方法，给实例使用
sing(){
console.log(`我是${this.province}的,${this.province}${this.city}的`);
}
}
//实例化对象
const s1 = new Song('云南','怒江');
const s2 = new Song('广东','深圳');
console.log(s1)
console.log(s2)
s1.sing();
s2.sing();
</script>
</body>
</html>
效果如图：
上面的代码完成了一个类的基本用法，有构造方法，有类方法，下面并实例化了两个类调用了其中的方法，实现了代码复用。
类的继承&重写父类方法
<script type="text/babel">
class Song {
//构造器方法
constructor(province, city) {
this.province = province
this.city = city
}
//一般方法
sing() {
console.log(`我是${this.province}的,${this.province}${this.city}的`);
}
}
//继承Song类
class Nation extends Song {
constructor(province, city, nation) {
super(province, city) //继承后给父类处理
this.nation = nation
}
sing() { //重写从父类继承的方法
console.log(`我是${this.province}的,${this.province}${this.city}的,${this.city}泸水市，泸水市六库，六库${this.nation}`);
}
translate(){
console.log(`${this.nation}是这样叫，乌鸦叫作阿南，青蛙叫作欧巴，老公叫作搓趴，老婆叫作搓嘛，香菜叫作野穴，红薯叫作阿梦，老虎叫作喇嘛，黄瓜叫作阿布。南瓜叫作阿普，鸡蛋叫作嘛啊耶夫`);
}
}
const n1 = new Nation('云南','怒江','傈僳族')
console.log(n1)
n1.sing();
n1.translate();
</script>
效果：
类总结
- 类中的构造器不是必须写的，要对实例进行一些初始化操作，要添加属性的时候才写。
例如要添加属性的时候不用重写父类的构造函数，复用的时候使用
super关键字就可以了 - 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
- 类中定义的方法都是放在了类的原型对象上，供实例使用
类式组件
<!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>学习React</title>
</head>
<body>
<div id="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">
class Translate extends React.Component{
render(){
return <h2>我是云南的，云南怒江的</h2>
}
}
ReactDOM.render(<Translate/>,document.getElementById('test'))
</script>
</body>
</html>
Translate这个类中的render,是在类的原型对象上，供实例使用 React 在ReactDOM.render方法发现组件是使用类定义的，就会new出来一个该类的实例，并通过该实例调用到原型上的render方法，最后才将render返回的虚拟DOM转为真实DOM，渲染页面。
组件三大属性
在Translate.render()方法中打印this，这个this是在Translate的实例对象，也就是Translate组件实例对象
props，refs，state，下篇开始学习React重要属性state
