动态组件：类组件

news2024/11/25 10:47:13

函数组件的缺点：

第1次渲染组件，把函数执行，产生一个私有的上下文: EC(V)，把解析出来的props「含children」传递进来「但是被冻结了」，对函数返回的JSX元素「virtualDOMJ进行渲染。当我们点击按钮的时候，会把绑定的小函数执行:修改上级上下文EC(V)中的变量，私有变量值发生了改变，但是"视图不会更新"=>也就是，函数组件第一次渲染完毕后，组件中的内容,不会根据组件内的某些操作，再进行更新，所以称它为静态组件

除非：在父组件中再次调用这个组件，然后传递不一样的数据进去！！！！！

所以我们就要通过类组件创建动态组件！！！！！！

类组件

创建一个构造函数(类),要求必须继承React。Component/PureComponent这个类

import React from "react" ;
class Vote extends React.Component{
}
export default Vote;

必须给当前类设置1个render的方法「放在其原型上」:在render方法中，返回需要渲染的视图

创建视图：

在这里插入图片描述

那么如何拿到这些数据？？？？title之类的

一些关于class的基础知识：

在这里插入图片描述

继承的原理
在这里插入图片描述
在constructor里面一定要有super！！！

在这里插入图片描述
如果自己不写construct，那么就会自动认为添加下面这个

在这里插入图片描述

拿数据：

首先回顾渲染的时候：

在这里插入图片描述

render函数在染的时候，这里的render是index.js里面的！！！
如果type是:
1.字符串:创建一个标签
2.普通函数:把函数执行，并且把props传递给函数
3.构造函数:把构造函数基于new执行「也就是创建类的-个实例」，也会把解析出来的props传递过去,每调用一次类组件都会创建单独的实例,把类组件中编写的render执行，如果不写render函数，在new的时候会把render执行，没有render就会报错，注意这个类组件中的render和index.js文件中的render是不一样的！！！！

现在我们来分析分析调用类组件「new Vote({…})」开始，类组件内部发生的事情:

1.设置规则校验

规则校验后才会初始化我们的属性

2.初始化属性

方案1：
在这里插入图片描述

这里必须调用super，具体原因看上面的继承原理

方案2：
即便我们自己不再constructor中处理「或者constructor都没写」， React内部也会把传递的props挂载到实例上;所以在其他的函数中，只要保证this是实例，就可以基于this . props获取传递的属性!同样this. props获取的属性对象也是被冻结的{只读的} 0bject.isFrozen( this. props)->true

在这里插入图片描述