React之组件的使用
Vue、React和Angular是三个流行的前端框架,采用组件化的开发方式。支持虚拟DOM(Virtual DOM)技术,有丰富的生态系统、大量的插件和工具可以使用。Vue的语法是传统的HTML和JavaScript,React使用JSX语法,Angular使用了TypeScript。Vue和React使用的是响应式数据绑定机制,即数据变化会自动更新视图,Angular使用的是双向数据绑定机制,即视图和数据之间可以互相同步变化。Vue和React是轻量级的框架,只关注视图层;Angular是完整的MVC框架,提供了更多的功能和约束,Vue和React比较适合中小型项目,Angular更适合中大型项目,但这只是建议,读者可以根据项目需求和个人喜好,选择适合的框架。本文主要介绍React 的基础知识。
一、 React特点,优缺点
特点:
-
组件化:React通过将UI分解为独立的可重用组件来构建复杂的用户界面。每个组件都有自己的状态和属性,可以独立地进行开发、测试和维护。
-
虚拟DOM:React使用虚拟DOM(Virtual DOM)来管理用户界面的更新。虚拟DOM是一个轻量级的JavaScript对象树,它与实际DOM保持同步,并且只在需要更新时才更新实际DOM,以提高性能。
-
单向数据流:React采用单向数据流的数据模型,即数据从父组件传递到子组件,子组件不能直接修改父组件的数据。这样可以更好地管理和跟踪数据的变化。
-
高性能:由于使用虚拟DOM和精确的DOM更新算法,React能够提供出色的性能。它只更新需要更改的部分,而不是整个界面,从而减少了不必要的DOM操作。
优点:
- 组件化开发使代码更易于维护和重用,提高开发效率。
- 虚拟DOM的使用减少了对实际DOM操作的频率,提高了性能。
- 单向数据流使数据的变化更易于追踪和调试。
缺点:
- 学习曲线较陡峭,对于初学者来说可能需要一些时间来熟悉其概念和使用方法。
- React仅关注于用户界面的构建,对于其他方面(如路由、状态管理等)需要结合其他库或框架来使用。
二、组件概念,特点
React 中的组件是用来封装可重用代码的基本单元。组件可以是函数式组件或类组件,并且可以通过组合其他组件来创建更大的组件。
组件的特点如下:
- 可组合性:组件可以通过嵌套和组合的方式来创建更复杂的组件,这使得代码更具有模块化和可重用性。
- 可重用性:组件可以在应用程序的不同部分进行重复使用,从而减少了重复编写代码的工作量。
- 可维护性:组件可以独立进行开发、测试和维护,使代码的维护更加容易。
- 单一职责:每个组件应该只关注一项功能,并且应该尽可能地小而简单。
- 状态管理:组件可以通过状态(state)来保存和管理数据,并且可以通过 props 属性向子组件传递数据。
- 视图渲染:组件可以根据状态的变化,自动更新视图,使用户界面保持与数据同步。
总之,组件是 React 中非常重要的概念,它们使得构建复杂的用户界面变得更加简单和可维护。通过将应用程序拆分为多个组件,我们可以提高代码的可读性和可重用性,并且更容易进行维护和扩展。
三、简单组件制作实例
1、创建项目
使用vite创建React项目,此项目执行环境为Window 10系统,执行下列命令前必须选安装 nodejs模块,具体方法可以查询其它文章。
首先在Window 10上打开命令行窗口,改变当前目录在您所在的练习目录下,例如,练习目录为'“d:\data"目录。输入命令:
d: 回车
cd data 回车
创建项目命令如下:
npm create vite my-app 回车,选择React和Javascript
cd my-app 回车
npm install 回车
npm run dev 回车 (项目启动)
在浏览器中的地址栏中输入"http://localhost:5173",出现如下效果,即是项目初始化成功。
2、编写简单组件
用以下代码二覆盖App.jsx,代码如下:
import React,{ Component }from 'react';class App extends Component {render() {return (<div><h1>Hello, React!</h1><p>This is a simple React component.</p></div>);}
}export default App;
这是一个名为App的React组件,它在这里作为应用的主组件。它继承自React.Component类,并实现了一个render方法。render方法返回了一个JSX元素,包含一个<h1>标题和一个<p>段落。最后,通过export default语句,将该组件导出以供其他组件使用。
四、 复杂组件示例
此示例是 一个简易的BBS的项目,在这个项目中有两个组件,一个是PostList,用于展示BBS的帖子列表,另外一个是PostItem组件,用于展示BBS帖子,PostList使用PostItem组件,这样两者就形成了父子关系。最终效果如下所示:

1、设计思路
React 应用组件设计的一般思路是,通过定义少数有状态的组件管理整个应用状态的变化 ,并且将状态通过props传递给其余无状态组件,由无状态组件完成界面绝大部分UI的渲染工作。总之,有状态组件主要关注状态变化的业务逻辑,无状态组件主要关注组件UI渲染。
根据设计思路,可以将:
PostList组件设计为一介有状态组件,负责帖子列表数据的获取及点赞行为的处理,主要设计为一个继承Component的组件类,使用数据posts存储帖子数据,handleVote函数负责处理点赞行为,具体代码如下:
import React, { Component } from 'react';
import './PostList.css';
import PortItem from './PostItem';
class PostList extends Component { constructor(props) {super(props);this.state = {posts:[]};this.timer=null;//定义定时器this.handleVote=this.handleVote.bind(this);//绑定this }componentDidMount(){this.timer=setTimeout(()=>{this.setState({posts:[{id:1,title:'大家一起讨论吧',author:'张三',date:'2017-09-01 10:00',vote:0},{id:2, title:'今天天气不错',author:'李四',date:'2017-09-01 10:00',vote:0},{ id:3,title:'明天天气不错',author:'王五',date:'2017-09-01 10:00',vote:0}]});},1000)}componentWillUnmount(){if(this.timer){clearTimeout(this.timer);}}handleVote(id){//根据帖子id找到对应帖子,并修改vote值const posts=this.state.posts.map(item=>{const newItem=item.id===id ? {...item,vote:item.vote+1}:item;return newItem; });//使用新的帖子数组更新state this.setState({posts}); }render() {return (<div className='container'><h2>帖子列表:</h2> <ul>{this.state.posts.map(item=><PortItem post={item} onVote={this.handleVote} key={item.id} />)}</ul></div>); }
}export default PostList;
,PostItem组件设计为一个无状态组件,只负责每一个帖子的展示,内部有一个状态变量vote记录每个帖子的点赞数,主要设计为组件函数,根据PostList传递的post属性渲染UI,当发生点赞行为时,调用props.onVote方法将点赞逻辑交给PostList中的handleVote方法处理。代码如下:
//PortItem.jsx
import React from 'react';
import './PostItem.css';function PostItem(props){const handleClick=()=>{props.onVote(props.post.id);}const { post }=propsreturn (<li className='item'><div className='title'>{post.title}</div><div className='author'>创建人:<span>{post.author}</span></div><div>创建时间:<span>{post.date}</span></div><div className='like'><button onClick={handleClick}>点赞</button> <span>{post.vote}</span></div></li>);
}export default PostItem;
本文从React基本知识说起,简要说明了React的特点和优缺点,组件概念和特点,简单组件的编写,最后以一简化的BBS项目讲述了组件的设计原则和技术细节。
相关文章:
React之组件的使用
Vue、React和Angular是三个流行的前端框架,采用组件化的开发方式。支持虚拟DOM(Virtual DOM)技术,有丰富的生态系统、大量的插件和工具可以使用。Vue的语法是传统的HTML和JavaScript,React使用JSX语法,Angu…...
深度学习--长短期记忆网络
1.引入 RNN 可以将以前的信息与当前的信息进行连接。例如,在视频中,可以用前面的帧来 帮助理解当前帧的内容;在文本中,可以用前面半句话的内容来预测后面的内容。但是, RNN 存在一个记忆消失的问题。例如,…...
研0 冲刺算法竞赛 day29 P2249 【深基13.例1】查找
P2249 【深基13.例1】查找 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路: ①二分查找 ②stl函数:lower_bound(a.begin(),a.end(),x) 返回第一个大于等于 x的数的地址 代码: #include<iostream> #include<algorithm> …...
基于vue框架的CKD电子病历系统nfa2e(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
系统程序文件列表 项目功能:患者,医生,药品信息,电子病历,临时医嘱,长期医嘱,健康科普 开题报告内容 基于Vue框架的CKD电子病历系统 开题报告 一、选题背景 随着信息技术的飞速发展和医疗信息化的深入推进,电子病历系统(Electronic Medic…...
笔记:python 安装tar包报错
报错信息 ERROR: Could not find a version that satisfies the requirement setuptools>40.8.0 (from versions: none)ERROR: No matching distribution found for setuptools>40.8.0分析 1,当前已安装 setuptools 并且版本超过40.8.0 解决方案 缺包了&am…...
575. 分糖果
哈喽!大家好,我是奇哥,一位专门给面试官添堵的职业面试员 文章持续更新,可以微信搜索【小奇JAVA面试】第一时间阅读,回复【资料】更有我为大家准备的福利哟! 文章目录 一、题目二、答案三、总结 一、题目 …...
手机电量消耗分析工具 Battery Historian 指南
阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中 电量 的部分知识点,通过阅读本篇文章,您将收获以下内容: 一、安装Battery Historian二、收集Batterystats 数据三、使用B…...
笔试练习day4
目录 WY22 Fibonacci数列题目解析解法暴力解法贪心代码 NC242 单词搜索题目解析例子1解析例子2解析例子3解析解法深度优先遍历dfs实现最终代码 BC140 杨辉三角解法线性dp问题代码 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 🐒🐒&am…...
公主少爷都爱看的haproxy七层代理详细介绍及常见实验详解
目录 一、负载均衡 1.1什么是负载均衡 1.2为什么要实验负载均衡 1.3四层负载均衡 1.4七层负载均衡 1.5四层负载均衡和七层负载均衡的对比 二、什么是haproxy 2.1定义 2. 2功能和特点 2.3应用场景 2.4haproxy的分类 三、安装及基本配置的信息 3.1软件的安装 3.2ha…...
Android笔试面试题AI答之Kotlin(6)
文章目录 24. 以下代码执行的结果是什么?25. 解释一下下述Kotlin 代码有什么问题?26. 如何在 Kotlin 中创建常量?示例注意事项总结 27. Koltin 可以互换使用 IntArray 和 Kotlin 中的 Array 吗?IntArrayArray<Int>互换使用从…...
“tcp控制协议”的理解
情景解释: 1.过程: 在用户进行网络间通信时,不管是客户端还是服务端,都会有两个缓冲区——发送缓冲区和接受缓冲区。 通过4个缓冲区进行数据交流。 用户通过write()将数据发送到他的发送缓冲区中,再传输到服务端的…...
考试成绩查询系统,发成绩不再愁
在考试季落幕后,家长们总是怀着紧张的心情,期待着孩子们的成绩单。传统上,老师们需要手动发送成绩单给每位家长,这个过程不仅耗时耗力,而且容易出错,给老师们带来了不小的压力。 随着科技的进步,…...
【扒代码】图像数据 Transformer
def forward(self, x, bboxes):# 确定对象的数量,如果不是零样本学习场景,则根据bboxes的数量确定num_objects bboxes.size(1) if not self.zero_shot else self.num_objects# backbone# 通过主干网络提取特征backbone_features self.backbone(x)# pre…...
光伏仿真系统的使用流程
为了更有效地规划设计并评估光伏电站的性能与经济性,光伏仿真系统应运而生。该系统通过模拟实际运行场景,为项目开发者提供全面的数据支持和决策依据。 1、气象数据分析 气象数据是光伏系统性能评估的基础。此阶段,仿真系统需收集并处理项目…...
【Dash】使用 dash_mantine_components 创建图表
一、Styling Your App The examples in the previous section used Dash HTML Components to build a simple app layout, but you can style your app to look more professional. This section will give a brief overview of the multiple tools that you can use to enhan…...
Unity 输入模块 之 初识新输入系统(其实也不新)
本文仅作笔记学习和分享,不用做任何商业用途 本文包括但不限于unity官方手册,unity唐老狮等教程知识,如有不足还请斧正 1.介绍 当年的宣传网页Unity新一代输入系统介绍 - 技术专栏 - Unity官方开发者社区 老输入系统每次配置新项目都需要写…...
springboot+redis集群实现集群拓扑动态刷新温故
springboot项目,并集成redis集群,当redis集群节点宕掉后又恢复了,但springboot调用redis集群服务报错,下面对springboot集成redis集群实现集群拓扑动态刷新进行温习和巩固。 原因分析: 使用lettuce连接redis集群实例&a…...
LoadRunner常用函数介绍
内置函数和Jmeter差不多,Jmeter更火,更好百度,毕竟开源,用的人多,所以有些函数如果不太懂用法,可以百度Jmeter作为参考来使用LR。 脚本中常用函数 事务组 lr_start_transaction("KaiShi"); //…...
通讯录管理系统
目录 一. 实验目的 二. 系统设计 三. 系统设计流程: 四. 实验结果及效果展示 五. 实验总结 六. 附录:源代码 一. 实验目的 本次实验旨在通过实现一个简单的通讯录管理系统,加深对C语言结构体、数组、指针、函数、控制结构等基本概念的理…...
基于Python爬虫+机器学习的长沙市租房价格预测研究
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林:一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好,未来的算法大神! 在数据结构的世界里,“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的,它…...
