当前位置: 首页 > news >正文

React中的类组件和函数组件(详解)

      React的核心思想就是组件化,相对于Vue来说,React的组件化更加灵活和多样。主要可以分为两大类:函数组件类组件,这两大类组件的名称必须是大写字母开头

一、函数组件

     函数组件通常是function进行定义的函数,这个函数会返回和类组件中render函数返回一样的内容
函数组件的特点:

  • 没有生命周期,会被更新并挂载,但是没有生命周期函数
  • 没有this(组件实例)
  • 没有内部状态(state

       函数组件的代码相对来说是简洁的,专注于render,且组件不需要实例化,整体渲染得到了提升,并且视图和数据解耦分离,输出只取决于输入
       因为没有state ,只能通过props获取属性内容并实现组件的更新,无生命周期

import React from 'react'export default function App(){render(){return (<div>Hello World!<div/>)}
}

注意:
      当render被调用的时候,会返回以下类型之一(同时还会检查this.props,this.state

  • React 元素:
  • 数组或者Fragments
    使render方法可以返回多个元素
  • Portals
    可以渲染子节点到不同的DOM子树上
  • 字符串或数值类型:
    DOM中会被渲染为文本节点
  • 布尔类型 或者 null
    什么都不渲染

二、类组件

       类组件的定义有两点要求,第一是需要继承自React.Component,第二是必须实现render函数
定义类组件的步骤:

  • constructor是可以选择的,通常需要在这里初始化一些数据
  • this.state中维护的就是我们组件内部的数据
  • render方法是class组件中唯一必须实现的方法
// index.js
import React from 'react'
import ReactDom from 'react-dom'import App from 'App.js'ReactDOM.render(<App />,document.getElementById('root'))// App.js
import React,{Component} from 'react' 
export default class App extends Component {render(){return(<div>Hello World<div/>)}
}

类组件特点:

  • 状态state是在constructor中初始化的
  • 成员函数不会自动绑定this,需要手动绑定才能获得当前组件实例对象

手动绑定this的方法:

  • 可以在构造函数中完成绑定
  • 可以在调用的时候使用method.bind(this)完成绑定
  • 使用箭头函数绑定

      state的变化会影响组件的渲染,因此不能把所有的变量都放到state中,不然会造成一定的性能损失,下面情况都不应该作为一个状态放到state中:

  • 通过props获取
  • 该变量不在render中使用
  • 整个过程不会发生改变
  • 变量可以通过propsstate两者计算得出

相关文章:

React中的类组件和函数组件(详解)

React的核心思想就是组件化&#xff0c;相对于Vue来说&#xff0c;React的组件化更加灵活和多样。主要可以分为两大类&#xff1a;函数组件&#xff0c;类组件&#xff0c;这两大类组件的名称必须是大写字母开头 一、函数组件 函数组件通常是function进行定义的函数&#xff0…...

1987-2021年全国31省专利申请数和授权数

1987-2021年全国31省国内三种专利申请数和授权数 1、时间&#xff1a;1987-2021年 2、来源&#xff1a;整理自国家统计局、科技统计年鉴、各省年鉴 3、范围&#xff1a;31省市 4、指标&#xff1a;国内专利申请受理量、国内发明专利申请受理量、国内实用新型专利申请受理量…...

欧洲云巨头OVHcloud收购边缘计算专家 gridscale

边缘计算社区近日获悉&#xff0c;欧洲云巨头OVHcloud已进入全面收购德国公司 gridscale 的谈判&#xff0c;该公司是一家专门从事超融合基础设施的软件提供商。 此次战略收购将标志着 OVHcloud 的另一个重要里程碑&#xff0c;使该集团能够显着加速其地理部署&#xff0c;并进…...

java从入门到起飞(八)——循环和递归

文章目录 Java循环1. 什么是循环&#xff1f;1.1 为什么需要循环&#xff1f;1.2 循环的分类 2. Java中的循环结构2.1 for循环2.2 while循环2.3 do-while循环 3. 循环控制语句3.1 break语句3.2 continue语句 4. 总结 Java递归1. 什么是递归2. 递归的原理3. 递归的实现4. 递归的…...

架构师成长之路|Redis实现延迟队列的三种方式

延迟队列实现 基于监听key过期实现的延迟队列实现,这里需要继承KeyspaceEventMessageListener类来实现监听redis键过期 public class KeyExpirationEventMessageListener extends KeyspaceEventMessageListener implementsApplicationEventPublisherAware {private static f…...

51单片机智能电风扇控制系统proteus仿真设计( 仿真+程序+原理图+报告+讲解视频)

51单片机智能电风扇控制系统仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 讲解视频1.主要功能&#xff1a;2.仿真3. 原理图4. 程序代码5.设计报告6. 设计资料内容清单 51单片机智能电风扇控制系统仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 仿真图…...

【设计模式】Head First 设计模式——工厂方法模式 C++实现

设计模式最大的作用就是在变化和稳定中间寻找隔离点&#xff0c;然后分离它们&#xff0c;从而管理变化。将变化像小兔子一样关到笼子里&#xff0c;让它在笼子里随便跳&#xff0c;而不至于跳出来把你整个房间给污染掉。 设计思想 定义一个用于创建对象的接口&#xff0c;让子…...

【爬虫】7.2. JavaScript动态渲染界面爬取-Selenium实战

JavaScript动态渲染界面爬取-Selenium实战 爬取的网页为&#xff1a;https://spa2.scrape.center&#xff0c;里面的内容都是通过Ajax渲染出来的&#xff0c;在分析xhr时候发现url里面有token参数&#xff0c;所有我们使用selenium自动化工具来爬取JavaScript渲染的界面。 fr…...

c语言实训心得3篇集合

c语言实训心得体会一&#xff1a; 在这个星期里&#xff0c;我们专业的学生在专业老师的带领下进行了c语言程序实践学习。在这之前&#xff0c;我们已经对c语言这门课程学习了一个学期&#xff0c;对其有了一定的了解&#xff0c;但是也仅仅是停留在了解的范围&#xff0c;对里…...

2023高教社杯数学建模B题思路代码 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…...

MySql 变量

1.系统变量 1.1 系统变量分类 变量由系统定义&#xff0c;不是用户定义&#xff0c;属于 服务器 层面。系统变量分为全局系统变量&#xff08;需要添加 global 关键字&#xff09;以及会话系统变量&#xff08;需要添加 session 关键字&#xff09;&#xff0c;有时也把全局系…...

2023-简单点-make和build都是什么东西?

make make命令根据makefile.txt中的命令进行批量处理。 编译时自动检查文件是否更新&#xff0c;如果文件已经更改&#xff0c;make会对他重新编译&#xff0c;否则跳过。 编译选定的目标&#xff0c;但是Make只编译上次编译变化过的文件&#xff0c;减少重复劳动&#xff0…...

Nginx 学习(八)Nginx实现用IP测试灰度发布

1.1 问题 配置Nginx使其可以将动态访问转交给uWSGI&#xff1a; 1.2 方案 安装Python工具及依赖 安装uWSGI并编写配置文件 1.3 步骤 实现此案例需要按照如下步骤进行。 步骤一&#xff1a; 1)安装python依赖软件[rootproxy python]# yum -y install gcc make pytho…...

QT 自定义信号

自定义信号&#xff0c;需要 1.在singnals:区域下写信号函数&#xff0c;以及函数对应的参数 2. 需要emit关键字进行发射信号 3. 在需要处理该信号的其他类中&#xff0c;建立信号和其信号槽函数connect() 4. 在其他类中创建信号处理槽函数 #include "mythread.h"my…...

注解方式配置SpringMVC

注解配置SpringMVC 1. 初始化类&#xff0c;代替web.xml2. 创建SpringConfig配置类&#xff0c;代替spring的配置文件3. 创建SpringMVCConfig配置类&#xff0c;代替SpringMVC.xml配置文件4. 项目结构 1. 初始化类&#xff0c;代替web.xml Spring3.2引入了一个便利的WebApplic…...

2023年限售股解禁研究报告

第一章 概述 解禁是指限售流通股过了限售承诺期&#xff0c;可以在二级市场自由买卖的过程。根据流通性质&#xff0c;可将上市公司股份分为有限售条件的流通股&#xff08;“限售流通股”&#xff09;及无限售条件的流通股&#xff08;“流通股”&#xff09;。 限售流通股指…...

『PyQt5-Qt Designer篇』| 08 Qt Designer中容器布局和绝对布局的使用

08 Qt Designer中容器布局和绝对布局的使用 1 容器布局1.1 设计容器布局1.2 保存文件并执行2 绝对布局2.1 设计绝对布局2.2 保存文件并执行1 容器布局 1.1 设计容器布局 先拖入一个容器Frame容器,然后拖入几个控件: 把拖入的控件拖入容器中: 选中容器,右键-布局-栅格布局:…...

Android 下第一个fragment app 先Java 后Kotlin

看着视频学习的&#xff0c;Fragment&#xff1a;3.Fragment使用方法_哔哩哔哩_bilibili 程序的运行效果是&#xff0c;手机页面有2个fragment&#xff0c;每个fragment 有一个text view&#xff0c;一个按钮&#xff0c;按一下显示&#xff0c;fine,and you?&#xff0c;各自…...

行业追踪,2023-09-04

自动复盘 2023-09-04 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

Android MQTT:实现设备信息上报与远程控制

Android MQTT&#xff1a;实现设备信息上报与远程控制 1. 介绍 1.1 MQTT是什么&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的消息传输协议&#xff0c;最初由IBM开发&#xff0c;用于连接远程设备与服务器之间的通信。它在物…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...