前端

这篇笔记记录了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,呈现在页面

三、实践练习例子

  • 已在上一节中列出

四、课后个人总结

  • JavaScript中类的概念定义以及相应的方法了解还不够深入，导致在理解这一部分的知识点时有一定的困难，需要复习JS的相关语法

五、引用参考