这是我参与「第四届青训营」笔记创作活动的第5天

➡️两种组件

💜函数式组件（简单组件）

返回一个HTML结构

//创建函数式组件
function myComponent(){
  return <h2>我是函数定义的组件（适用于简单组件）</h2>
}

//注意这里要写成自闭合标签的形式（首字母大写）
ReactDOM.render(<MyComponent/>,document.getElementById("test"));

❓当渲染页面的时候有没有调用这个函数？谁调用的？

有调用这个函数。React帮我调用了这个函数。
❓函数内部的this指向？

babel将jax翻译成js时开启了严格模式，所以this指向undefined。
执行了ReactDOM.render(<MyComponent/>,document.getElementById("test")); 之后发生了什么？
1. React解析组件标签，找到Mycomponent组件
2. 发现组件是使用函数定义的，随后调用该函数，将返回值作为虚拟DOM转为真实DOM，随后呈现在页面中。

复习类的基本知识

创建一个类

class Person{

}
var p1 = new Person();
console.log(p1);

结果：Person{} ，Person代表p1是谁new出来的，{}表明P1的是一个空对象。

给类加一些成员对象。

class Person{
//构造器
constructor(name,age){
//构造器中的this是实例化对象
    this.name = name;
    this.age = age;
  }
}
const p1 = new('小明',18);

各类加一些方法

class Person{
  speak(){
     console.log('我叫${this.name},我的年龄是${this.age}');
  }
}

❓方法放在了哪里？

放在了Person类的原型链上。
❓speak方法给谁用的，通过Person实例调用speak,speak中的this指向谁？

供实例化对象用的，this指向person实例

继承

继承后，子类拥有了父类原型上的方法（构造函数和方法）。

当学生的属性和person的属性一样的时候，就不需要新的构造函数，用继承的构造函数就可以。

class Student extends Person{

}
const s1 = new Student('小张',18);

当学生新增了属性，就需要有自己的构造函数

class Student extends Person{
   constructot(name,age,grade){
     super(name,age);
     this.grade = grade;
  }
}

子类重写父类的方法

speak(){
  console.log('我叫${this.name},我的年龄是${this.age},我的年级是${this.grade}');
}

构造器总结

类中的构造器不是必须要写的，要对实例进行初始化操作的时候（添加指定属性的时候）才写。
如果A类继承了B类，且A类写了构造器，那么A类构造器中的super是必须要调用的。
类中定义的方法，都是定义在类的原型对象上

💜类式组件

//创建类式组件（必须继承React中的component类）
class mycomponent extends React.component{
   render(){
   return <h1>我是用类定义的组件（复杂组件）</h1>
  }
 //渲染组件到页面
}
ReactDOM.render(<Mycomponent/>,document.getElementById("test"));

❓render是放在哪里的？this指向谁？

放在类的原型对象上，供实例化对象使用。this指向实例化对象。
执行了ReactDOM.render(<Mycomponent/>,document.getElementById("test")); 后，发生了什么
1. 发现组件使用类定义的，随后new出来该类的实例，并由该实例调用到原型上的render方法。
2. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面上。

React两种组件 | 青训营笔记

➡️两种组件

💜函数式组件（简单组件）

复习类的基本知识

创建一个类

给类加一些成员对象。

各类加一些方法

继承

构造器总结

💜类式组件