【React】静态组件动态组件

news2025/1/21 1:52:18

静态组件

函数组件是静态组件：

组件第一次渲染完毕后，无法基于内部的某些操作让组件更新「无法实现自更新」；但是，如果调用它的父组件更新了，那么相关的子组件也一定会更新「可能传递最新的属性值进来」；
函数组件具备：属性…「其他状态等内容几乎没有」
优势：比类组件处理的机制简单，这样导致函数组件渲染速度更快。

第一次渲染组件，把函数执行

产生一个私有的上下文：EC(V)
把解析出来的props「含children」传递进来「但是被冻结了」
对函数返回的JSX元素「virtualDOM」进行渲染
当我们点击按钮的时候，会把绑定的小函数执行：
修改上级上下文EC(V)中的变量
私有变量值发生了改变
但是视图不会更新

真实项目中，有这样的需求：第一次渲染就不会再变化的，可以使用函数组件。但是大部分需求，都需要在第一次渲染完毕后，基于组件内部的某些操作，让组件可以更新，以此呈现出不同的效果，也就是动态组件「类组件、Hooks组件(在函数组件中，使用Hooks函数)」


const Vote = function Vote(props) {
    let { title } = props;
    let supNum = 10,
        oppNum = 5;

    return <div className="vote-box">
        <div className="header">
            <h2 className="title">{title}</h2>
            <span>{supNum + oppNum}人</span>
        </div>
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
        </div>
        <div className="footer">
            <button onClick={() => {
                supNum++;
                console.log(supNum);
            }}>支持</button>

            <button onClick={() => {
                oppNum++;
                console.log(oppNum);
            }}>反对</button>
        </div>
    </div>;
};
export default Vote;

可以看到，点击之后，页面并没有变化
在这里插入图片描述

动态组件

类组件是“动态组件”：

组件在第一渲染完毕后，除了父组件更新可以触发其更新外，我们还可以通过：this.setState修改状态或者 this.forceUpdate 等方式，让组件实现“自更新”！！
类组件具备：属性、状态、周期函数、ref…「几乎组件应该有的东西它都具备」
优势：功能强大。

Hooks组件「推荐」

具备了函数组件和类组件的各自优势，在函数组件的基础上，基于hooks函数，让函数组件也可以拥有状态、周期函数等，让函数组件也可以实现自更新「动态化」。

创建一个构造函数(类)

要求必须继承React.Component/PureComponent这个类
通常使用使用ES6中的class创建类「因为方便」
必须给当前类设置一个render的方法「放在其原型上」：在render方法中，返回需要渲染的视图

//import React .... : 把基于export default导出的内容获取到
//import { Component, PureComponent } .... : 不是对React对象做解构赋值，而是把基于 export function Component(){} 一个个导出的内容，做解构赋值

import React, { Component, PureComponent } from "react";

这里展示在 React 中使用类和函数两种方式来实现组件。

使用 `class` 实现组件**

通过 ES6 class 类来定义的。Vote 类继承了 React.Component，并通过 export default 导出。

class Vote extends React.Component {
  render() {
    return <div>投票组件</div>;
  }
}
export default Vote;

使用 `function` 实现类组件**

使用传统的 JavaScript 函数，通过 Object.setPrototypeOf 来使该函数继承 React.Component，从而具备 React 组件的能力。

function AAA() {
  React.Component.call(this);  // 手动绑定 React.Component 的上下文，模拟了类的构造器。
  this.state = { x: 10, y: 20 };
}
//设置 `AAA` 函数的原型链，使得它继承了 `React.Component` 的原型，从而具备了 React 组件的行为
Object.setPrototypeOf(AAA.prototype, React.Component.prototype);  // 设置原型链

AAA.prototype.sum = function () { /* 自定义方法 */ };