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

react中的函数式组件和类式组件

一、函数组件

1. 定义函数组件

在React中,函数组件(Functional Component)是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props,并返回一个React元素或者一组React元素作为输出。定义函数组件的基本语法如下:

function MyComponent(props) {// 组件的逻辑和渲染内容return (// 组件的UI内容);
}

注意点:

  1. 函数组件的函数名通常使用首字母大写的驼峰命名法,以示区分普通的JavaScript函数。
  2. 函数组件接收的输入参数 props 是一个包含传递给组件的属性的JavaScript对象。可以通过 props 对象来访问传递进来的属性值。
  3. 函数组件内部的逻辑和渲染内容可以使用函数的控制结构、变量、循环等等,并根据需要返回一个React元素或者一组React元素。
  4. 函数组件只能返回一个根元素,可以使用多个子元素将它们包裹起来。
  5. 函数组件不能使用this关键字,因为它没有实例对象。如果需要使用状态或者生命周期方法等特性,可以使用React的钩子函数来实现

2. 函数式组件没有自己的state

在React中,函数组件是以函数的形式定义的组件。函数组件没有自己的state,但可以使用React的hooks来定义和管理状态

函数组件的定义形式如下:

function MyComponent(props) {return <div>Hello, {props.name}!</div>;
}

函数组件可以接收一个 props 对象作为参数,并且返回一个 React 元素。props 对象包含了从父组件传递下来的数据。

要让函数组件拥有自己的状态,可以使用 useState hook。 useState 返回一个带有两个元素的数组,第一个元素是状态的当前值,第二个元素是一个可以更新该状态的函数。可以根据需要在组件内使用多个 useState 来管理多个状态。

以下是一个使用 useState 的函数组件示例:

import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button><button onClick={() => setCount(count - 1)}>Decrement</button></div>);
}

在上述示例中,useState(0) 定义了一个名为 count 的状态变量并初始化为 0。通过 setCount 函数可以更新 count 的值。每次点击 “Increment” 按钮时,count 的值都会增加 1。点击 “Decrement” 按钮时,count 的值会减少 1。

二、类式组件

1. 定义类式组件

在React中定义类组件需要继承React.Component类,并且实现render方法来返回需要渲染的内容。

类组件的定义通常如下所示:

import React from 'react';class MyComponent extends React.Component {render() {return (<div>{/* 内容 */}</div>);}
}

类式组件的注意点:

  1. 继承React.Component类:类组件必须继承React.Component类,以便能够使用React提供的组件功能。

  2. 构造函数:如果需要在组件中使用state状态数据,可以通过构造函数来初始化state。

  3. 渲染方法:类组件必须实现一个render方法,该方法返回要渲染的内容。render方法中可以使用JSX语法描述UI组件的结构。

  4. 生命周期方法:类组件可以使用React提供的生命周期方法,用于在组件的不同生命周期阶段执行特定的操作,如componentDidMount用于组件挂载后执行操作,componentWillUnmount用于组件卸载前执行操作等。

  5. 使用props:类组件可以通过props属性接收父组件传递的数据,并在render方法中使用。

  6. 事件处理:在类组件中可以定义事件处理方法,并将其绑定到相应的DOM元素上。

  7. 修改state:通过调用setState方法可以修改state状态数据,并自动重新渲染组件。

  8. 不直接操作DOM:类组件应该避免直接操作DOM元素,而是使用setState方法来更新组件的状态。

  9. 使用this关键字:在类组件中,需要使用this关键字来访问组件的属性和方法。

  10. 遵循命名规范:类组件的名称应该以大写字母开头,并采用帕斯卡命名法。

2. 类中的state以及如何更新

在React的类组件中,状态是通过构造函数的this.state属性来管理的。状态是一个普通的JavaScript对象,包含组件中的数据。构造函数只会在组件实例化时被调用一次,用于初始化组件的状态。

要更新状态,可以使用this.setState方法。setState方法接受一个新的状态对象作为参数,并比较新的状态与当前状态的差异,然后进行合并和更新。React会响应式地重新渲染组件并更新页面,以反映出新的状态。

以下是一个示例代码,演示了状态如何被定义和更新:

import React, {Component} from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0};}incrementCount() {this.setState({count: this.state.count + 1});}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.incrementCount()}>Increment</button></div>);}
}export default Counter;

上述代码中,Counter组件的状态在构造函数中初始化为一个计数器的初始值0。incrementCount方法会在点击按钮时被调用,用于更新count状态。通过使用this.setState来更新状态,React会重新渲染组件并将新的状态反映到页面上。

需要注意的是,更新状态是异步的,并且React会对多个setState调用进行批处理以提高性能。因此,在调用setState之后访问this.state可能无法立即获得最新的状态值。如果需要在更新状态后进行一些操作,可以使用setState的第二个参数,它是一个回调函数,在状态更新完成后被调用。

这就是在React的类组件中管理和更新状态的基本方法。通过合理使用状态,可以实现组件的交互和动态更新。

3. react更新状态的渲染过程

在React中,组件的状态(state)是存储在组件内部的对象。当状态发生变化时,React会重新渲染组件来反映这些变化。为了触发重新渲染,React要求使用this.setState()方法来更新组件的状态。

this.setState()方法是React提供的用于更新组件状态的方法。它是一个异步方法,接受一个对象作为参数,表示要更新的状态属性和它们的新值。当调用this.setState()时,React会合并新的状态与旧的状态,并计划执行一次组件的重新渲染。

这个渲染过程是React的内部机制自动完成的,不需要开发者手动干预。在重新渲染时,React会比较新旧状态的差异,并生成相应的虚拟DOM(Virtual DOM)树。然后,React会将这个虚拟DOM树与之前的虚拟DOM树进行比较,找出变化的部分,然后将这些变化应用到实际的DOM树上,从而更新用户界面。

值得注意的是,由于this.setState()是一个异步方法,所以多次调用this.setState()可能会被合并为一次更新。为了确保在状态更新后进行一些操作(例如在新状态生效后进行一些处理),可以使用this.setState()的第二个参数,这是一个回调函数,会在状态更新完成后被调用。

总结起来,React要求使用this.setState()方法来更新组件的状态,以触发重新渲染过程。这个过程是由React的内部机制自动完成的,用于比较新旧状态的差异,并将变化应用于实际的DOM树上,从而更新用户界面。

4. 事件绑定this指向问题

就是上面“2”中的示例,如果不使用箭头函数来绑定事件处理函数,而是直接使用onClick={this.incrementCount}这种写法,会导致this在事件处理函数中由于上下文的问题变成undefined

原因是,当使用普通的函数写法时,事件处理函数的执行上下文会丢失,即this会指向undefined。而使用箭头函数时,箭头函数没有自己的this,它会继承外层作用域的this,所以可以正确地将this绑定到事件处理函数中。

所以,为了确保事件处理函数中的this指向组件实例,需要使用箭头函数来绑定事件处理函数,即onClick={() => this.incrementCount()}

还有一种写法是将函数绑定到构造函数中:

constructor(props) {super(props);this.state = {count: 0};this.incrementCount = this.incrementCount.bind(this);
}

然后在onClick中直接使用this.incrementCount即可,这样也可以正确地将this绑定到事件处理函数中。

相关文章:

react中的函数式组件和类式组件

一、函数组件 1. 定义函数组件 在React中&#xff0c;函数组件&#xff08;Functional Component&#xff09;是一种通过纯粹的JavaScript函数定义的UI组件。函数组件采用函数的方式接收一个输入参数 props&#xff0c;并返回一个React元素或者一组React元素作为输出。定义函…...

Visual Studio 2022 设置 PySide6 扩展工具

前言 本人不想电脑上装一堆的IDE,所以把 Python 开发也交给了 Visual Studio,如果你不是用 Visual Studio 做 Python 开发,下文就不用看了。 PySide简介 PySide跟PyQt类似,都是支持Python的Qt包,不同的是,PyQt是第三方的,PySide是Qt官方的。 PySide的推出比PyQt晚很…...

【高效开发工具系列】Postman

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

汇编语言王爽第四版17.3完程可运行可调试

汇编语言王爽第四版17.3节完整程序&#xff0c;可调试&#xff0c;可运行。 最基本的字符串输入程序&#xff0c;具备以下功能&#xff1a; 1、在输入的同时需要显示这个字符串&#xff1b; 2、输入回车符后&#xff0c;一个字符串的输入结束&#xff1b; 3、能够删除已经输入…...

CH9329芯片应用—简介

概述 CH9329是一款串口转USB HID设备功能芯片&#xff0c;根据不同的工作模式&#xff0c;HID设备可以识别为&#xff1a;USB键盘设备、USB鼠标设备或者自定义HID类设备。接收串口数据&#xff0c;并自动根据串口工作模式进行数据解析&#xff0c;解析完成后按照HID类设备规范…...

mysql查看插入记录与查看mysql实时查询和插入速度

我真正关心的数据 比如一秒钟到底能插入多少行数据?慢查询有多少? 慢是一个相对概念,慢的绝对值时间是可以设置的,例如我设置long_query_time为10秒,那么但凡超过10秒的查询都可以认为是慢查询查询操作的超时时间mysql中系统变量什么意思?怎么查看系统变量? show varia…...

如何在VScode中让printf输出中文

如何在VScode中让printf输出中文&#xff1f; 1、在“Visual Studio Code”图标上右击&#xff0c;弹出对话框。见下图&#xff1a; 2、点击“以管理员身份运行”&#xff0c;得到下图&#xff1a; 3、点击“UTF-8”按钮&#xff0c;得到下图&#xff1a; 4、点击“通过编码重…...

qt hiRedis封装使用

qt Redis使用...

整理指定文件夹下的所有文件,以类树状图显示并生成对应超链接

最近在整理家里学习资料的时候&#xff0c;由于年代久远&#xff0c;找不到我想要找的文件&#xff0c;windows文件搜索速度感觉太慢。于是想要生成一份类似文件索引的东西来显示所有资料&#xff0c;让我可以快速的找到需要的资料路径 直接上代码 import os import datetim…...

解密代理技术:保障隐私与网络安全

在当今信息时代&#xff0c;网络代理技术是维护隐私和增强网络安全的关键工具。本文将深入研究Socks5代理、IP代理的应用&#xff0c;以及它们在网络安全、爬虫开发和HTTP协议中的关键作用。 引言 随着互联网的不断扩张&#xff0c;我们的在线活动变得日益复杂&#xff0c;也…...

k8s中,“deployment”充当什么角色?有什么功能?

在Kubernetes中&#xff0c;"Deployment"是一种控制器&#xff08;Controller&#xff09;&#xff0c;它充当了以下主要角色和功能&#xff1a; 应用程序部署和管理&#xff1a; Deployment用于定义和管理应用程序的部署。它允许您指定应用程序的副本数&#xff08;…...

深度学习:激活函数曲线总结

深度学习&#xff1a;激活函数曲线总结 在深度学习中有很多时候需要利用激活函数进行非线性处理&#xff0c;在搭建网路的时候也是非常重要的&#xff0c;为了更好的理解不同的激活函数的区别和差异&#xff0c;在这里做一个简单的总结&#xff0c;在pytorch中常用的激活函数的…...

Elasticsearch-06-Elasticsearch Java API Client

前言 简介 在 Elasticsearch7.15版本之后&#xff0c;Elasticsearch官方将它的高级客户端 RestHighLevelClient标记为弃用状态。同时推出了全新的 Java API客户端 Elasticsearch Java API Client&#xff0c;该客户端也将在 Elasticsearch8.0及以后版本中成为官方推荐使用的客…...

计算机网络第3章-运输层(2)

可靠数据传输原理 可靠数据传输依靠数据在一条可靠信道上进行传输。 TCP也正是依靠可靠信道进行传数据&#xff0c;从而数据不会被丢失。 而实现这种可靠数据传输服务是可靠数据传输协议的责任 构造可靠数据传输协议 1.经完全可靠信道的可靠数据传输&#xff1a;rdt1.0 在…...

【微信小程序】实现投票功能(附源码)

一、Vant Weapp介绍 Vant Weapp 是一个基于微信小程序的组件库&#xff0c;它提供了丰富的 UI 组件和交互功能&#xff0c;能够帮助开发者快速构建出现代化的小程序应用。Vant Weapp 的设计理念注重简洁、易用和高效&#xff0c;同时提供灵活的定制化选项&#xff0c;以满足开发…...

Pytorch入门实例的分解写法

数据集是受教育年限和收入,如下图 代码如下 import torch import numpy as np import matplotlib.pyplot as plt import pandas as pddata pd.read_csv(./Income.csv)X torch.from_numpy(data.Education.values.reshape(-1,1).astype(np.float32)) Y torch.from_numpy(data…...

Google单元测试sample分析(一)

本文开始从googletest提供的sample案例分析如何使用单元测试&#xff0c; 代码路径在googletest/googletest/samples/sample1.unittest.cc 本文件主要介绍EXPECT*相关宏使用 EXPECT_EQ 判断是否相等 EXPECT_TRUE 是否为True EXPECT_FALSE 是否为False TEST(FactorialTest, N…...

requests 实践

Requests 常用参数 method&#xff1a; 请求方式 get&#xff0c;或者 post&#xff0c;put&#xff0c;delete 等 url : 请求的 url 地址 接口文档标注的接口请求地址 params&#xff1a;请求数据中的链接&#xff0c;常见的一个 get 请求&#xff0c;请求参数都是在 url 地址…...

UI设计公司成长日记2:修身及持之以恒不断学习是要务

作者&#xff1a;蓝蓝设计 要做一个好的UI设计公司,不仅要在能力上设计能力一直&#xff08;十几年几十年&#xff09;保持优秀稳定的保持输出&#xff0c;以及心态的平和宽广。创始人对做公司要有信心&#xff0c;合伙人之间要同甘共苦&#xff0c;遵守规则&#xff0c;做好表…...

辅助驾驶功能开发-功能规范篇(23)-2-Mobileye NOP功能规范

5.2 状态机要求 5.2.1 NOP/HWP 状态机 NOP/HWP状态机如下所示: 下表总结了这些状态: 状态描述Passive不满足功能条件,功能无法控制车辆执行器。Standby满足功能条件。该功能不是由驾驶员激活的。功能不控制车辆执行器。Active - Main功能由驾驶员激活。功能是控制…...

TSMaster安全算法实战:如何用DLL快速实现SeedKey解锁(附常见错误排查)

TSMaster安全算法实战&#xff1a;如何用DLL快速实现Seed&Key解锁&#xff08;附常见错误排查&#xff09; 在汽车电子诊断领域&#xff0c;安全访问机制&#xff08;Seed&Key&#xff09;如同车辆的电子钥匙&#xff0c;是保护ECU数据安全的重要屏障。作为深耕诊断协议…...

终极MCP协议指南:从协议原理到Awesome MCP Servers完整实践

终极MCP协议指南&#xff1a;从协议原理到Awesome MCP Servers完整实践 【免费下载链接】awesome-mcp-servers A collection of MCP servers. 项目地址: https://gitcode.com/GitHub_Trending/aweso/awesome-mcp-servers MCP&#xff08;Model Context Protocol&#xf…...

M5Stamp C3 Mate LED驱动库:基于RMT的WS2812B精简控制方案

1. 项目概述M5StampC3LED 是专为 M5Stamp C3 Mate 模块设计的 LED 控制库&#xff0c;其本质是一个轻量级封装层&#xff0c;用于驱动板载的 Adafruit NeoPixel&#xff08;WS2812B 兼容&#xff09;RGB LED。该库不直接实现底层时序协议&#xff0c;而是基于 ESP-IDF 或 Ardui…...

从单片机到Linux驱动的技术成长与转型

1. 从单片机到Linux驱动的技术成长之路 刚毕业那会儿&#xff0c;我和大多数电子工程专业的同学一样&#xff0c;怀揣着对技术的无限憧憬。记得大四校招时&#xff0c;我固执地只投递了几家知名大厂的嵌入式开发岗位&#xff0c;甚至在面试时直接报出了远超应届生水平的薪资期望…...

关于eclipse2019中导入克隆的web项目

分为导入项目和排查可能错误两个方面前言&#xff1a;本文主要总结个人在完成需要合作完成学习项目时&#xff0c;使用共享项目文件时“环境”问题导致的无法“跑通”&#xff0c;为此忙碌很久和豆包进行了“深入聊天”。决定对自己的问题进行总结&#xff0c;方便自己以后阅读…...

Vivado Linux版安装空间不足?手把手教你如何优化磁盘空间分配

Vivado Linux版安装空间优化实战指南&#xff1a;从130G到80G的瘦身方案 当你在Linux系统上第一次看到Vivado安装程序提示需要130GB以上的磁盘空间时&#xff0c;那种震惊感我至今记忆犹新。作为一名长期在ThinkPad X1 Carbon上工作的FPGA开发者&#xff0c;我深刻理解空间受限…...

MinIO实战指南:Linux环境下的部署、配置与防火墙调优

1. MinIO是什么&#xff1f;为什么选择它&#xff1f; 如果你正在寻找一个轻量级、高性能的对象存储解决方案&#xff0c;MinIO绝对值得一试。作为一个开源的分布式对象存储系统&#xff0c;它兼容Amazon S3 API&#xff0c;这意味着你可以用极低的成本搭建私有云存储服务。我在…...

JavaScript开发提效:从ZoomIt、Inspection Lens到Xmind的实战应用

1. ZoomIt&#xff1a;让代码审查和演示更高效的工具 第一次接触ZoomIt是在一次团队代码评审会上。当时同事正在讲解一个复杂的DOM操作逻辑&#xff0c;屏幕上的代码密密麻麻&#xff0c;后排同事根本看不清细节。只见他按下快捷键&#xff0c;屏幕瞬间放大到200%&#xff0c;关…...

5分钟搞定OpenClaw+Qwen3-14b_int4_awq:星图GPU镜像一键体验

5分钟搞定OpenClawQwen3-14b_int4_awq&#xff1a;星图GPU镜像一键体验 1. 为什么选择星图平台体验OpenClaw 上周我在本地尝试部署OpenClaw时&#xff0c;被各种环境依赖折腾得够呛。从Node.js版本冲突到Python包兼容性问题&#xff0c;光是解决报错就花了大半天时间。正当我…...

RC滤波器设计实战:从基础到高阶应用

1. RC滤波器设计基础与核心概念在嵌入式系统设计中&#xff0c;信号滤波是每个硬件工程师必须掌握的核心技能。我从业十余年处理过无数传感器信号&#xff0c;发现90%的噪声问题都可以通过合理设计的RC滤波器解决。与动辄使用运放或DSP方案相比&#xff0c;无源RC滤波器以极低成…...