React组件通信浅析
目录
1、函数式组件
<script type="text/babel">
// 1. 创建函数式组件
function Demo() {
// 里面的this是undefined，因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
// 2. 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
执行了ReactDOM.render(<Demo/>,document.getElementById('test'))之后，React解析组件标签，找到了Demo组件，发现组件是用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM呈现在页面中
注意：①函数名首字母必须大写；②函数要有返回值；③render里面要写组件标签
2、类式组件
（1）类的基本知识
<script type="text/javascript" >
//创建一个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}`);
}
}
//创建一个Student类，继承于Person类
class Student extends Person {
constructor(name,age,grade){
super(name,age)
this.grade = grade
this.school = '清华大学'
}
//重写从父类继承过来的方法
speak(){
console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
this.study()
}
study(){
//study方法放在了类的原型对象上，供实例使用
//通过Student实例调用study时，study中的this就是Student实例
console.log('我很努力的学习');
}
}
class Car {
constructor(name,price){
this.name = name
this.price = price
// this.wheel = 4
}
//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
a = 1
wheel = 4
static demo = 100
}
const c1 = new Car('奔驰c63',199)
console.log(c1);
console.log(Car.demo);
</script>
1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
（1）类式组件
<script type="text/babel">
class MyComponent extends React.Component {
render(){
//render是放在MyComponent的原型对象上，供实例使用。
//render中的this是MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log('render中的this:',this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>
执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后，React解析组件标签，找到了MyComponent组件。发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
原文地址：https://blog.csdn.net/m0_46613429/article/details/128315968