React学习--定义组件的两种方法

一.函数式组件

举例如下：

<div id="test></div>

<script type="text/babel">
//1.创建函数式组件
function MyComponent(){
	console.log(this) 
	return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />,document.getElementById('test'))
</script>

• 在函数内部console.log(this)打印的是undefined,因为babel编译后会开启严格模式
• 执行ReactDOM.render(<MyComponet />),.......后发生了什么？
  （1）React解析组件标签，找到MyComponent组件
  （2）发现组件是函数定义的，随后调用函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
• 函数名必须大写，因为此处函数名相当于组件名，组件名必须大写

二.类的基本知识

1. 创建类

//创建一个Person类
class Person{
	//构造器方法
	constructor(name,age){
		构造器中的this是谁？--- 类的实例对象
		this.name = name
		this.age = age
	}
	//一般方法
	speak(){
		speak方法放在了哪里？--- 类的原型对象上，供实例适用
		通过Person实例调用speak时，speak中的this就是Person实例
		console.log(`我叫${this.name},我的年龄是${this.age}`)
	}
}
const p1 = new Person('tom',18)
const p2 = new Person('jerry',19)
console.log(p1) 
console.log(p2)
p1.speak()
p2.speak()

2. 类的继承

class Student extends Person{
	constructor(name,age,grade){
		super() //调用了父类构造器函数中的方法
		this.grade = grade
	}
	//重写从父类继承来的方法
	speak(){
		console.log(`我叫${this.name}，我的年龄是${this.age},我读的是${this.grade}年级`)
	}
	study(){
		study方法放在了哪里？--- 类的原型对象上，供实例适用
		通过Student实例调用study时，study中的this就是Student实例
		console.log('我很努力的学习')
	}
}
const s1 = new Student('小张',15,'高一')
console.log(s1)
s1.speak()
s1.study()

• 如果子类和父类接收的参数相同，则可以不写构造器函数，如果参数不相同，则需要重新写构造器函数

总结：

1. 类中的构造器不是必须写的，当要对实例进行一些初始化的操作时，如添加指定属性时才写
2. 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
3. 类中定义的方法都是放在了类的原型对象上，供类的实例去使用

三.类式组件

<div id="test></div>

<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component{
	render(){
		return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
	}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />,document.getElementById('test'))
</script>

• 类式组件的重点：继承、render()方法
• render()是放在哪里的？— MyComponent的原型对象上，供实例对象使用
• render中的this是谁？— MyComponent的实例对象，即MyComponent组件实例对象
• 执行ReactDOM.render(<MyComponet />),.......后发生了什么？
  （1）React解析组件标签，找到MyComponent组件
  （2）发现组件是类定义的，随后new出来该类的实例对象，并通过实例调用到原型上的render方法
  （3）将render返回的虚拟DOM转为真实DOM，随后呈现在页面中