React学习笔记【2】(类式组件及函数式组件)

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

• 英文：https://react.dev/
• 中文：https://react.docschina.org/

类的部分知识

<script>
	//创建一个Person类
	class Person{
		//构造器方法
		costructor(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('测试',15);
	P1.speak();
	//继承
	//创建一个Student类继承于Person类
	class Student extends Person{
		costructor(name,age,grade){
			super(name,age);
			this.grade = grade;
		}
		//类中可直接写赋值语句，如下代码的含义是：给实例对象添加一个属性，名为height，值为178
		height = 178
		//重写从父类继承过来的方法
		speak(){
			console.log(`我叫${this.name},我的年龄是${this.age},我读的是${this.grade}年级`);
		}
	}
	const S1 = new student('测试',18,'高一');
	S1.speak();
</script>

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

函数式组件

<script type="text/babel">
	// 创建函数式组件
     function MyComponent() {
     	 console.log(this);//此处的this为undefined，因为babel	编译后开启了严格模式
         return <h1>我使用函数定义的组件，适用于【简单组件】的定义</h1>
     };
     //渲染组件到页面
     ReactDOM.render(<MyComponent />, document.getElementById('test'));
     /*
		执行了ReactDOM.render(<MyComponent />,document.getElementById('test'))之后
			1、React解析组件标签，找到了MyComponent组件。
			2、发现组件是函数定义的，最后调用该函数，将返回的虚拟DOM转为真实DOM，最后呈现在页面上。
	*/
</script>

类式组件

<script type="text/babel">
    /*
		创建类式组件
		1、必须继承于 React.Component。
		2、必须有render方法且有返回值。
	*/
	class MyComponent extends React.Component{
		render(){
			return <h1>我使用类定义的组件，适用于【复杂组件】的定义</h1>
		}
	}
	//渲染组件到页面
	ReactDOM.render(<MyComponent />,document.getElementById('test'));
	 /*
		执行了ReactDOM.render(<MyComponent />,document.getElementById('test'))之后
			1、React解析组件标签，找到了MyComponent组件。
			2、发现组件是类定义的，随后new出来该类的实例，并通过该实例调用到原型上的rander方法，
			3、将返回的虚拟DOM转为真实DOM，最后呈现在页面上。
	*/
</script>