【React】静态组件动态组件

目录

  • 静态组件
  • 动态组件
    • 创建一个构造函数(类)
      • 使用 `class` 实现组件**
      • 使用 `function` 实现类组件**

静态组件

函数组件是静态组件

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

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

  • 产生一个私有的上下文: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 () { /* 自定义方法 */ };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/67317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt/C++ 基于 QGraphicsView 的绘图软件 (附源码下载链接)

基于 Qt 的 QGraphicsView 绘图软件项目进行深入讲解&#xff0c;分析其核心代码与功能实现&#xff0c;帮助开发者理解 QGraphicsView 的用法。 项目概览 该项目实现了一个简单的绘图应用&#xff0c;用户可以在界面中创建和编辑矩形、椭圆、直线、多边形和文本等图形对象。功…

Vue2+OpenLayers给2个标点Feature分别添加独立的点击事件(提供Gitee源码)

前言&#xff1a;之前开发都是将所有的点位存放在一个图层上面&#xff0c;并统一赋予它们相同的点击事件&#xff0c;如果其中某些点的点击事件不一样呢&#xff0c;这种问题如何解决呢&#xff0c;本篇博客就是解决这个通点。 目录 一、案例截图 二、安装OpenLayers库 三…

李宏毅机器学习课程笔记03 | 类神经网络优化技巧

文章目录 类神经网络优化技巧局部最小值local minima 与 鞍点saddle pointSaddle Point 的情况更常见 Tips for training&#xff1a;Batch and MomentumSmall Batch vs Large Batch回顾&#xff1a;optimization优化 找到参数使L最小问题&#xff1a;为什么要用Batch&#xff…

如何学习网络安全?有哪些小窍门?

学好网络安全其实没有所谓的捷径&#xff0c;也没有什么小窍门。 入门网络安全首先要有浓厚的学习兴趣&#xff0c;不然很容易就变成了从入门到放弃了。 其次要能静下心&#xff0c;踏踏实实的打好基础。如果你是零基础&#xff0c;建议从Web安全入手&#xff0c;课程难度相对…

测试工程师的linux 命令学习(持续更新中)

1.ls """1.ls""" ls -l 除文件名称外&#xff0c;亦将文件型态、权限、拥有者、文件大小等资讯详细列出 ls -l等同于 ll第一列共10位&#xff0c;第1位表示文档类型&#xff0c;d表示目录&#xff0c;-表示普通文件&#xff0c;l表示链接文件。…

K8S 亲和性与反亲和性 深度好文

今天我们来实验 pod 亲和性。官网描述如下&#xff1a; 假设有如下三个节点的 K8S 集群&#xff1a; k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点 容器运行时是 containerd 一、镜像准备 1.1、镜像拉取 docker pull tomcat:8.5-jre8-alpine docker pull nginx…

Nginx三种不同类型的虚拟主机(基于域名、IP 和端口)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; Nginx-从零开始的服务器之旅专栏&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年1月15日13点14分 目录 1. 基于域名的虚拟主机 …

解析OVN架构及其在OpenStack中的集成

引言 随着云计算技术的发展&#xff0c;虚拟化网络成为云平台不可或缺的一部分。为了更好地管理和控制虚拟网络&#xff0c;Open Virtual Network (OVN) 应运而生。作为Open vSwitch (OVS) 的扩展&#xff0c;OVN 提供了对虚拟网络抽象的支持&#xff0c;使得大规模部署和管理…

【Flink系列】9. Flink容错机制

9. 容错机制 在Flink中&#xff0c;有一套完整的容错机制来保证故障后的恢复&#xff0c;其中最重要的就是检查点。 9.1 检查点&#xff08;Checkpoint&#xff09; 9.1.1 检查点的保存 1&#xff09;周期性的触发保存 “随时存档”确实恢复起来方便&#xff0c;可是需要我…

《Keras 3 在 TPU 上的肺炎分类》

Keras 3 在 TPU 上的肺炎分类 作者&#xff1a;Amy MiHyun Jang创建日期&#xff1a;2020/07/28最后修改时间&#xff1a;2024/02/12描述&#xff1a;TPU 上的医学图像分类。 &#xff08;i&#xff09; 此示例使用 Keras 3 在 Colab 中查看 GitHub 源 简介 设置 本教程将介…

openssl s_server源码剥离

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

51单片机 DS18B20温度储传感器

DS18B20温度传感器 64-BITROM&#xff1a;作为器件地址&#xff0c;用于总线通信的寻址&#xff0c;是唯一的&#xff0c;不可更改 SCRATCHPAD&#xff08;暂存器&#xff09;&#xff1a;用于总线的数据交互 EEPROM&#xff1a;用于保存温度触发阈值和配置参数 暂存器 单总线…

[操作系统] 深入理解操作系统的概念及定位

概念 任何计算机系统都包含⼀个基本的程序集合&#xff0c;称为操作系统(OS)。 其核心功能如图片所示&#xff0c;包括&#xff1a; 内核 (Kernel)&#xff1a; 内核是操作系统的核心部分&#xff0c;被认为是狭义上的操作系统&#xff0c;直接与硬件打交道。负责进程管理、内…

Java并发编程——线程池(基础,使用,拒绝策略,命名,提交方式,状态)

我是一个计算机专业研0的学生卡蒙Camel&#x1f42b;&#x1f42b;&#x1f42b;&#xff08;刚保研&#xff09; 记录每天学习过程&#xff08;主要学习Java、python、人工智能&#xff09;&#xff0c;总结知识点&#xff08;内容来自&#xff1a;自我总结网上借鉴&#xff0…

nginx 配置代理,根据 不同的请求头进行转发至不同的代理

解决场景&#xff1a;下载发票的版式文件&#xff0c;第三方返回的是url链接地址&#xff0c;但是服务是部署在内网环境&#xff0c;无法访问互联网进行下载。此时需要进行走反向代理出去&#xff0c;如果按照已有套路&#xff0c;就是根据不同的访问前缀&#xff0c;跳转不同的…

docker在不删除容器的情况下修改端口映射

注意&#xff1a;必须先停止docker服务&#xff01;&#xff01;&#xff01;&#xff01; 1) 停止容器 2) 停止docker服务(systemctl stop docker) 3) 修改这个容器的hostconfig.json和config.v2.json文件中的端口 先查看容器id docker inspect jenkins 进入该目录 hostcon…

【js进阶】设计模式之单例模式的几种声明方式

单例模式&#xff0c;简言之就是一个类无论实例化多少次&#xff0c;最终都是同一个对象 原生js的几个辅助方式的实现 手写forEch,map,filter Array.prototype.MyForEach function (callback) {for (let i 0; i < this.length; i) {callback(this[i], i, this);} };con…

专题 - STM32

基础 基础知识 STM所有产品线&#xff08;列举型号&#xff09;&#xff1a; STM产品的3内核架构&#xff08;列举ARM芯片架构&#xff09;&#xff1a; STM32的3开发方式&#xff1a; STM32的5开发工具和套件&#xff1a; 若要在电脑上直接硬件级调试STM32设备&#xff0c;则…

-bash: /java: cannot execute binary file

在linux安装jdk报错 -bash: /java: cannot execute binary file 原因是jdk安装包和linux的不一致 程序员的面试宝典&#xff0c;一个免费的刷题平台

【MySQL】使用C语言链接

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;MySQL 目录 一&#xff1a;&#x1f525; MySQL connect &#x1f98b; Connector / C 使用&#x1f98b; mysql 接口介绍&#x1f98b; 完整代码样例 二&#xff1a;&#x1f525; 共勉 一&#…