上节课我们已经复习了一些关于js类的一些相关知识,这节课我们继续往后进行,开始正式学习react的类式组件。

回顾

在学习类式组件之前呢,我们先对上节课内容做一个简单的回顾

  • 类中的构造器并不是必须要写的
  • 要对实例进行一些实例化的操作才需要写构造器
  • 如果A继承了B类,那么A类的构造器方法必须在第一步就调用super方法
  • 类中定义的方法是放在了类的原型对象上供实例对象来使用。
  • 类的实例对象在调用方法时会优先从自身原型对象上查找方法,如果没有找到则通过原型链去父类的原型对象中去查找

以上就是我们上节课的知识要点接下来我们来进行新内容动学习。

创建类组件(定义类组件)

通过上节课的学习我们知道类组件的本质就是一个类,我们之前说定义函数组件就是定义一个函数,那么同理,定义一个类组件其实就是定义一个类。

我们来回忆一下函数式组件中,我们定义的函数名最终就是我们的组件名,当然同理,我们的类组件中也是一样,类名也就是我们的组件名。

class MyComponent {};

像这样,我们一个类组件就算创建好了吗?

其实并不是,这样写只是创建了MyComponent这么一个类而已。这个类跟react中的组件一点关系都没有。而且这个类也不能作为react中的组件去使用。这是为什么呢?

我们先就这个类来看,就这么一个空的类,谁能认识这是什么啊。可能有人要说了,那要不我写个构造器方法在里面是不是就行了呢?其实吧react是有规定的,如果我们要想使用类组件,创建类的时候必须要想先继承一个reactd的一个内置类,叫做React.Component类。

也就是说代码得改成:

class MyComponent extends React.Component {};

这样才算是和react类组件搭上边了。但是接下来问题来了。MyComponent继承了React.Component,如果接下来我要在Mycomponent中写构造器,按照上节课复习的知识,我要在构造器方法第一步调用super方法,那么这里我到底写不写构造器方法呢?

咱也别那么多废话,我们打开react官网首页下面的示例代码

image-20211213204738236

从这段代码可以看出官方给的示例根本就没有写构造器方法,所以说构造器方法是可以省略掉的。但是目前来说,构造器方法是可以先省略的,等到我们学完了组件三大属性之后再来专门讨论关于构造器方法的问题。但是就目前来说,不写构造器对我们的学习编程一点影响都没有。

我们继续看官方的示例,虽然没有构造器,但是里面有一个render方法,而且render方法有一个返回值。这里的render方法和返回值必须同时具备,缺一不可。

所以我们得出一个结论,如果要用类组件,必须创建类,而且类必须继承React.Component类,类里面必须要有一个render方法,而且render方法一定要有返回值。

那么现在我们就知道该怎么处理了

class MyComponent extends React.Component {
  render() {
    return (
      <h2>类式组件</h2>
    );
  }
};

ReactDOM.render(<MyComponent/>, document.getElementById("test"));

我们来看一下效果:

image-20211213205720009

这样我们就将我们的组件成功渲染到了页面上。

类组件的几个问题

上面这段代码成功渲染了组件到页面上,到这我们的类组件是不是就学完了?其实并不是。接下来我们来讨论几个小问题。

类组件中的render方法在哪?

我们上一节课就说过,类里的方法都放在类的原型对象中,供实例对象来调用。

当然这里也是一样,render方法也是存储在原型对象中的。

类组件的实例对象在什么时候创建了?

我们学习类的时候都知道let obj = new className();这是在创建一个实例对象,但是我们这里却并没有操作这一步啊。可是我们的组件却真真切切地渲染到了页面上。也就是说肯定在哪个我们不知道的地方,实例化了我们创建的这个类。

我们再来回忆一下这个问题是不是觉得眼熟,回想一下函数式组件的时候,我们定义了函数式组件,但是却并没有手动调用啊,这里也是类似,我创建了一个类,也没有手动实例化啊。

但是这两个都有一个相同的操作是什么啊?是不是在ReactDOM.render()方法中传入了一个组件标签啊?

函数式组件那一课我们说过,我们传入了组件标签,react在渲染的时候回自动调用我们创建的函数。

那么这里也是一样啊,在react渲染的时候自动实例化了我们的类。

实际上react在渲染类组件的时候都发生了什么呢其实和函数式组件类似:

  1. React解析组件标签,找到了组件
  2. 发现组件是类定义的,随后实例化了该类,并通过该实例对象调用到原型上的render方法
  3. render返回的虚拟DOM映射到真实DOM并呈现到页面上

总结

  • 要使用类组件就要定义类
  • 类组件创建的类必须继承React.Component
  • 类组件创建的类里面必须要有一个render方法
  • render方法一定要有返回值。
  • render方法存放在类的原型对象中
  • react在渲染类组件时会自动实例化类

Copyright statement:The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article:https://work.lynchow.com/article/class_component/