这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
这篇笔记记录了React入门的一些基础知识
一、本堂课重点内容
- 类的相关知识复习
- 类组件
二、详细知识点介绍
1、类的相关知识复习
1.1 构造器方法
- 构造器方法完成类对象的初始化和参数赋值
- 构造器方法中的
this是类的实例对象 - 类中的构造器不是必须写的，要对实例进行一些初始化操作，如添加指定属性时才写
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
1.2 一般方法
- 一般方法放在了类的原型对象上，供实例使用
- 通过
Person实例调用speak()时，speak()中的this就是Person实例
1.3 继承
- 继承的子类可以不写构造器，直接继承父类的构造器方法
- 如果子类要写构造器，必须调用
super()方法class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } }
2、类组件
- 使用类定义组件，然后渲染组件到页面上
// 创建类组件
class MyComponent extends React.Component {
render() {
return <h2>我是用类定义的组件（适用于复杂组件的定义）</h2>
}
}
// 渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'));
- 类组件的特点
- 首先声明的组件类需要继承
React.Component这个react的内置类。同时需要写一个render函数，类的方法在类的原型对象上。所以我们需要知道这个render函数，定义在MyComponent的原型对象上。render里面的this则指向的就是类的实例，也可以称为组件的实例。 - 写
ReactDOM.render后发生了什么：- React解析组件标签，找到了
MyComponent这个组件 - 发现组件是用类定义的，随后
new出来该类的实例，并通过该实例调用到类原型上的render方法。这些都是react帮我们做的 - 将render返回的虚拟的DOM转化为真实DOM,呈现在页面
- React解析组件标签，找到了
- 首先声明的组件类需要继承
三、实践练习例子
- 已在上一节中列出
四、课后个人总结
- JavaScript中类的概念定义以及相应的方法了解还不够深入，导致在理解这一部分的知识点时有一定的困难，需要复习JS的相关语法
