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

JS、JSX 和 TSX 的对比指南

news 来源：原创 2025/5/22 17:06:55

JS、JSX 和 TSX 的对比指南

1. JavaScript (.js)

简介

JavaScript 是一种轻量级的、解释型的编程语言，是 Web 开发中最基础的语言之一。

优点

学习曲线较低，容易入门
使用范围广泛，生态系统成熟
灵活性高，支持多种编程范式
不需要编译，直接在浏览器中运行
社区支持强大，资源丰富

缺点

类型系统不完善，容易出现类型相关的错误
代码可维护性较差（在大型项目中）
没有编译时检查，错误只能在运行时发现
代码重构较困难

使用场景

// 普通 JavaScript 示例
function calculateSum(a, b) {return a + b;
}const user = {name: 'John',age: 30
};const greeting = `Hello, ${user.name}!`;// 数组操作
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);// 异步操作
async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;} catch (error) {console.error('Error:', error);}
}

2. JSX (.jsx)

简介

JSX 是 JavaScript 的语法扩展，主要用于 React 开发，允许在 JavaScript 中编写类 HTML 的代码。

优点

提供了声明式的视图层开发方式
可以直观地描述 UI 结构
与 React 完美集成
支持 JavaScript 表达式嵌入
有助于防止 XSS 攻击

缺点

需要编译转换
仍然缺乏类型检查
学习曲线比纯 JavaScript 略陡
依赖于 React 生态系统

使用场景

// JSX 组件示例
function Welcome(props) {return (<div className="welcome"><h1>Hello, {props.name}</h1><p>Welcome to our website!</p></div>);
}// 条件渲染
function UserGreeting(props) {return (<div>{props.isLoggedIn ? (<h1>Welcome back!</h1>) : (<h1>Please sign in.</h1>)}{props.notifications.length > 0 && (<NotificationList items={props.notifications} />)}</div>);
}// 列表渲染
function TodoList({ items }) {return (<ul>{items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);
}

3. TSX (.tsx)

简介

TSX 是 TypeScript 与 JSX 的结合，为 React 应用提供了类型安全的开发方式。

优点

提供完整的类型检查系统
更好的 IDE 支持（自动补全、错误提示）
提高代码可维护性和可读性
更容易进行大型项目开发
减少运行时错误

缺点

学习曲线较陡
需要额外的编译时间
配置相对复杂
代码量会略微增加
需要维护类型定义

使用场景

// 接口定义
interface User {id: number;name: string;email: string;age?: number;
}// 组件 Props 类型定义
interface WelcomeProps {user: User;onLogout: () => void;
}// TSX 组件示例
const Welcome: React.FC<WelcomeProps> = ({ user, onLogout }) => {return (<div className="welcome"><h1>Welcome, {user.name}</h1>{user.age && <p>Age: {user.age}</p>}<button onClick={onLogout}>Logout</button></div>);
};// 泛型组件示例
interface ListProps<T> {items: T[];renderItem: (item: T) => React.ReactNode;
}function List<T>({ items, renderItem }: ListProps<T>) {return (<ul>{items.map((item, index) => (<li key={index}>{renderItem(item)}</li>))}</ul>);
}// 使用泛型组件
const UserList: React.FC<{ users: User[] }> = ({ users }) => {return (<Listitems={users}renderItem={(user) => (<span>{user.name} ({user.email})</span>)}/>);
};

选择建议

小型项目
- 如果是简单的网页或小型应用，使用 .js 就足够了
- 开发速度快，配置简单
中型 React 项目
- 推荐使用 .jsx
- 良好的开发体验和组件化开发
大型项目
- 强烈推荐使用 .tsx
- 类型安全，更好的可维护性
- 适合团队协作开发

总结

JS: 适合小型项目和快速原型开发
JSX: 适合中型 React 项目，注重视图层开发
TSX: 适合大型项目和企业级应用开发，特别是团队协作

选择哪种文件格式主要取决于：

项目规模和复杂度
团队规模和技术栈
是否需要类型安全
开发维护周期长短

JS、JSX 和 TSX 的对比指南

JS、JSX 和 TSX 的对比指南 1. JavaScript (.js) 简介 JavaScript 是一种轻量级的、解释型的编程语言，是 Web 开发中最基础的语言之一。优点学习曲线较低，容易入门使用范围广泛，生态系统成熟灵活性高，支持多种编程范式不需…...

编程日记 2025/5/22 17:06:55

【STM32】RTT-Studio中HAL库开发教程十：EC800M-4G模块使用

文章目录一、简介二、模块测试三、OneNet物联网配置四、完整代码五、测试验证一、简介 EC800M4G是一款4G模块，本次实验主要是进行互联网的测试，模块测试，以及如何配置ONENET设备的相关参数，以及使用STM32F4来测试模块的数据上报…...

编程日记 2025/5/21 19:09:11

1.切换到nginx目录下, 新建conf.d文件夹 mkdir conf.d 2.赋予conf.d权限 chmod 777 conf.d 3.进入conf.d, 编辑conf文件 vim zc_travel.conf server { listen 13101; server_name localhost;location / {root /home/baoxin/app/web/insight-radar-rcfx-pre/html_dev;index …...

编程日记 2025/5/22 16:51:24

服务器中了挖矿病毒-应急响应

事件：客户反映服务器响应很慢，出行卡顿，服务器操作系统为windows server 2008。现场解决步骤： 1、打开任务管理器，看到一个javs.exe的程序，占用CPU使用率比较高，怀疑可能是木马。 2、右键打开…...

编程日记 2025/5/20 21:47:53

pid学习感悟

飞行控制PID算法——无人机飞控_飞控算法-CSDN博客首先pid是对现测量值和目标值的差值，即偏差值的操作 p是线性操作，偏差越大，则对于控制单元操作的值越大 d是微分操作，我们知道微分其实就是数值变化的斜率，所以当偏…...

编程日记 2025/5/20 10:53:59

Centos7.9安装openldap+phpldapadmin+grafana配置LDAP登录最详细步骤亲测100%能行

一、部署LDAP 1、安装LDAP yum install -y openldap-servers openldap-clients openldap openldap-devel compat-openldap openldap-servers-sql systemctl start slapd systemctl enable slapd2、创建第一个管理账号密码（设置为ldapadmin） slappass…...

编程日记 2025/5/22 16:57:32

唯品会C++面试题及参考答案

内存池怎么可以保证不会产生碎片？内存池通过预先分配一块较大的内存区域，然后对这块内存进行管理，来减少碎片产生。首先，内存池采用固定大小的内存块分配策略。比如，将内存池划分成大小相同的小块，当有内存分配请求时，就从这些固定大小的块中选取合适的进行分配。这种…...

编程日记 2025/5/21 23:13:56

Flask中@app.route()的methods参数详解

诸神缄默不语-个人CSDN博文目录在 Flask 中，app.route 是用于定义路由的核心装饰器，开发者可以通过它为应用指定 URL 映射及相应的处理函数。在处理 HTTP 请求时，不同的业务场景需要支持不同的 HTTP 方法，而 app.route 的 metho…...

编程日记 2025/5/13 5:07:43

使用Grafana中按钮插件实现收发HTTP请求

最近项目中需要监控分布式集群的各项指标信息，需要用到PrometheusGrafana的技术栈实现对分布式集群的各个节点状态进行可视化显示，但是要求前端需要提供一个易用的接口让用户可以触发一些操作，例如负载高时进行负载均衡或弹性伸缩。网上找到的…...

编程日记 2025/5/21 23:43:50

workman服务端开发模式-应用开发-vue-element-admin挂载websocket

一、项目根目录main.js添加全局引入 import /utils/websocket 二、在根目录app.vue 中初始化WebSocket连接 <template><div id"app"><router-view /></div> </template><script>import store from ./store export default {n…...

编程日记 2025/5/19 8:49:07

堆排序【东北大学oj数据结构9-4】C++

堆排序是一种基于堆的数据结构的排序，是一种快速排序算法，可以在输入数组中实现排序处理（内存高效）。堆排序可以实现如下： maxHeapify(A, i) l left(i) r right(i) // select the node which has the m…...

编程日记 2025/5/21 19:02:23

Linux RTC 驱动框架

目录一、实时时钟（RTC）介绍1.1 概述1.2 功能1.3 应用场景1.4 工作原理1.5 对外接口1.6 常见 RTC 芯片1.7 在 Linux 系统中的应用1.8 注意事项二、Linux 内核 RTC 驱动框架2.1 相关源码文件介绍2.2 核心数据结构2.2.1 struct rtc_device2.2.2 rtc_class…...

编程日记 2025/5/22 7:31:04

智能订餐：基于JSP的管理系统设计与优化

相关技术介绍 2.1 B/S结构目前使用较多的开发结构模式大致可以包括C/S模式和B/S模式[5]。其中，C/S模式全称为客户端/服务器模式（Client/Server模式），B/S模式全称为浏览器/服务器模式（Browser/Server模式）。…...

编程日记 2025/5/16 6:51:22

Java基本查询（四）

JPA 查询All示例 JPA教程 - JPA查询All示例我们可以在JPQL中使用带有子查询的ALL运算符。 List l em.createQuery("SELECT e FROM Professor e WHERE e.salary < " "ALL (SELECT d.salary FROM e.directs d)").getResultList();例子下面的代码来自…...

编程日记 2025/5/21 15:16:37

【双指针算法】--复写零

文章目录 1. 题目2. 题目解析3. 代码 1. 题目在线oj 给你一个长度固定的整数数组 arr ，请你将该数组中出现的每个零都复写一遍，并将其余的元素向右平移。注意：请不要在超过该数组长度的位置写入元素。请对输入的数组就地进行上述修改&a…...

编程日记 2025/5/21 6:16:16

leetcode hot100 两两交换链表之中的节点

24. 两两交换链表中的节点已解答中等相关标签相关企业给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换） # Definition fo…...

编程日记 2025/5/22 16:55:08

Yolo11改进策略：主干网络改进|FastVit与Yolo11完美融合，重参数重构Yolo11网络（全网首发）

文章目录摘要FastViT：一种使用结构重新参数化的快速混合视觉变换器1、简介2、相关工作3、体系结构3.1、概述3.2、FastViT3.2.1、重新参数化跳过连接3.2.2、线性训练时间过参数化3.2.3、大核卷积4、实验4.1、图像分类4.2、鲁棒性评价4.3、3D Hand网格估计4.4、语义分割和目标检…...

编程日记 2025/5/20 10:56:20

vscode打开下一个文件的时候上一个文件会关闭

解决方法： 你可以通过设置 workbench.editor.enablePreview 来控制在 VS Code 中打开文件时是否会关闭上一个文件。将其设置为 false 可以防止这种行为。 {"workbench.editor.enablePreview": false } 在设置编辑器中显示 "workbench.editor.enab…...

编程日记 2025/5/22 16:43:58

windows使用zip包安装MySQL

windows通过zip包安装MySQL windows通过zip包安装MySQL下载MySQL的zip安装包创建安装目录和数据目录解压zip安装包创建配置目录 etc 和配置文件 my.ini安装MySQL进入解压后的bin目录执行命令初始化执行命令安装验证安装查看服务已安装启动MySQL查看服务运行情况修改密码创建…...

编程日记 2025/5/21 14:02:55

【LeetCode每日一题】——415.字符串相加

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】一【题目类别】字符串二【题目难度】简单三【题目编号】 415.字符串相加四【题目描述】给定两个字符…...

编程日记 2025/5/22 0:01:27

基于角色的访问控制（RBAC）在异构系统中的应用

在数字化蓬勃发展的当下，企业运营高度依赖各类异构系统。基于角色的访问控制（RBAC）成为管理这些系统中用户权限的核心策略。RBAC 依据组织内的岗位、职责定义角色，按角色分配权限，用户凭借所属角色获取相应访问权&…...

编程日记 2025/5/21 4:49:27

FPGA实现MIPI转FPD-Link车载同轴视频传输方案，基于IMX327+FPD953架构，提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博主所有FPGA工程项目-->汇总目录我这里已有的 MIPI 编解码方案 3、本 MIPI CSI-RX IP 介绍4、详细设计方案设计原理框图IMX327 及其配置FPD-Link视频串化-解串方案MIPI CSI RX图像 ISP 处理图像缓存HDMI输出工程源码架构 5、…...

编程日记 2025/5/22 16:57:32

远程控制macOS一直卡在100%，能连接上了却只显示了壁纸？

前言前段时间有个朋友过来咨询关于Windows使用第三方远程软件（向日葵、Todesk等）远程连接控制macOS系统，但出现了一些奇奇怪怪的问题。比如在连接的时候，一直卡在100%连接，对方的电脑却已经显示已经被控制的状态。…...

编程日记 2025/5/18 11:13:49

springboot中使用gdal将表中的空间数据转shapefile文件

springboot中使用gdal将表中的空间数据转shapefile文件代码： // 样本导出-将样本表导出为shapefile，复制样本shp文件到临时目录下 sampleDir是文件夹pathpublic void setYbShapeFile(Yb yb, File sampleDir) {// 创建前时项和后时项文件夹File y…...

编程日记 2025/5/22 16:10:46

捋一捋相关性运算，以及DTD和NLP中的应用

捋一捋相关性运算，以及DTD和NLP中的应用相关性和相干性,有木有傻傻分不清相关性数字信号的相关运算同维度信号的相关理解相关--互相关--相干回声消除过程如何套用这些知识相关性/相干性检测在DT中的应用参考相关性和相干性,有木有傻傻分不清这是容易混淆的两个…...

编程日记 2025/5/22 16:11:23

Calcite Web 项目常见问题解决方案

Calcite Web 项目常见问题解决方案 calcite-web Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties. [这里是图片001] 项…...

编程日记 2025/5/18 12:25:15

3090. 每个字符最多出现两次的最长子字符串

题目内容： 给你一个字符串 s ，请找出满足每个字符最多出现两次的最长子字符串，并返回该子字符串的最大长度。示例 1： 输入： s "bcbbbcba" 输出： 4 解释： 以下子字符串长…...

编程日记 2025/5/21 10:17:19

基于微信小程序的短视频系统（SpringBoot）+文档

💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2025/5/21 14:01:41

Git的简介

文章目录一.Git是什么二.核心概念三.工作流程四.Git的优势下载Git 推荐官网下载官网地址一.Git是什么 Git是一个分布式版本控制系统，用于跟踪文件的变化并协调多人对同一项目的开发工作。它就像是一个时光机器，能够记录文件在不同时间点的状态&…...

编程日记 2025/5/19 15:18:44

【XR】ATW

异步时间扭曲（Asynchronous Timewarp，简称ATW）是一种在虚拟现实（VR）技术中使用的算法，它通过生成中间帧来减少因帧率不足导致的抖动和延迟，从而提高用户体验。ATW技术在两个线程中完成时间扭曲的…...

编程日记 2025/5/22 17:03:11

记Fastjson2的一个报ConcurrentModificationException的bug

错误背景：fastjson2的parseObject方法，在spring webflux项目中被调用，有时会报java.util.ConcurrentModificationException错误。报错处的代码如下图： 改了半天与并发安全相关的代码，还是会报此错误。后来改变思路搜…...

编程日记 2025/5/19 18:52:15

JAVAweb学习日记（二）JavaScript

一、概念二、JavaScript引入方式三、JavaScript书写语法输出语句： 变量： 数据类型、运算符、流程控制语句： 数据类型： 运算符： 字符串如果是数字字符构成，先把读到的数字转为数字类型，后续…...

编程日记 2025/5/22 16:42:04

FPGA学习（基于小梅哥Xilinx FPGA）学习笔记

文章目录一、整个工程的流程二、基于Vivado的FPGA开发流程实践（二选一多路器）什么是二选一多路器用verilog语言，Vivado软件进行该电路实现1、设计输入：Design Sources中的代码2、分析和综合：分析设计输入中是否有错误…...

编程日记 2025/5/19 15:38:46

Linux的VIM基本操作

编辑模式转换编辑指令 linux用vim编辑代码，再用gcc进行编译编辑命令如下 gcc编译如下...

编程日记 2025/5/16 8:33:01

2024年12月英语六级CET6写作与翻译笔记

目录 1 写作 1.1 大学为学生提供了探索各种可能性 1.2 自律在个人成长中的重要性 1.3 切实可行的目标 2 翻译 2.1 洋山港(Yangshan Port) 2.2 中国航天事业 2.3 北斗卫星导航系统 1 写作 1.1 大学为学生提供了探索各种可能性 1.2 自律在个人成长中的重要性 1.3 切实可…...

编程日记 2025/5/22 15:08:45

学习记录：electron主进程与渲染进程直接的通信示例【开箱即用】

electron主进程与渲染进程直接的通信示例 1. 背景： electronvue实现桌面应用开发 2.异步模式 2.1使用.send 和.on的方式 preload.js中代码示例： const { contextBridge, ipcRenderer} require(electron);// 暴露通信接口 contextBridge.exposeInMa…...

编程日记 2025/5/21 10:53:33

领域自适应

领域自适应（Domain Adaptation）是一种技术，用于将机器学习模型从一个数据分布（源域）迁移到另一个数据分布（目标域）。这在源数据和目标数据具有不同特征分布但任务相同的情况下特别有用。领域自适…...

编程日记 2025/5/19 18:51:11

Kubeadm+Containerd部署k8s(v1.28.2)集群（非高可用版）

KubeadmContainerd部署k8s(v1.28.2)集群（非高可用版） 文章目录 KubeadmContainerd部署k8s(v1.28.2)集群（非高可用版）一.环境准备1.服务器准备2.环境配置3.设置主机名4.修改国内镜像源地址5.配置时间同步6.配置内核转发及网桥过滤 …...

编程日记 2025/5/22 16:45:39

重温设计模式--职责链模式

文章目录职责链模式的详细介绍C 代码示例C示例代码2 职责链模式的详细介绍定义与概念职责链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它旨在将请求的发送者和多个接收者解耦，让多个对象都有机会处理请求&a…...

编程日记 2025/5/17 5:01:51

单点登录平台Casdoor搭建与使用，集成gitlab同步创建删除账号

一，简介一般来说，公司有很多系统使用，为了实现统一的用户名管理和登录所有系统（如 GitLab、Harbor 等），并在员工离职时只需删除一个主账号即可实现权限清除，可以采用单点登录 (SSO) 和集中式…...

编程日记 2025/5/17 20:48:43

【Rust自学】5.1. 定义并实例化struct

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 5.1.1. 什么是struct struct的中文意思为结构体，它是一种自定义的数据类型，它允许程序为相关联的值命名和打包&am…...

编程日记 2025/5/19 14:16:38

vue-cli 5接入模块联邦 module federation

vue-cli 5接入模块联邦 module federation 模块联邦概念实现思路配置遇到的问题: 模块联邦概念模块联邦由webpack 5最先推出的,让应用加载远程的代码模块来实现不同的Web应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费 (用一个…...

编程日记 2025/5/18 23:07:25

[前端]mac安装nvm（node.js）多版本管理

NVM功能简介 NVM（Node Version Manager）是一个用于管理多个Node.js版本的命令行工具，它允许开发者在同一台机器上安装、切换和卸载不同版本的Node.js，从而解决版本不兼容的问题。以下是NVM的一些主要功能和用途： 安装和…...

编程日记 2025/5/19 19:38:24

thinkphp8+layui分页

前端 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>demo</title><link href"//unpkg.com/layui2.9.20/dist/css/layui.css" rel"stylesheet"> </head> <…...

编程日记 2025/5/16 17:43:48

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？ 重要性：★★★ NLP Github 项目： NLP 项目实践：fasterai/nlp-project-practice 介绍：该仓库围绕着 NLP 任务模型的设计、训练、优化、部署和应用…...

编程日记 2025/5/17 6:59:00

VSCode搭建Java开发环境 2024保姆级安装教程（Java环境搭建+VSCode安装+运行测试+背景图设置）

名人说：一点浩然气，千里快哉风。—— 苏轼《水调歌头》创作者：Code_流苏(CSDN) 目录一、Java开发环境搭建二、VScode下载及安装三、VSCode配置Java环境四、运行测试五、背景图设置很高兴你打开了这篇博客，更多详细的安装教程&…...

编程日记 2025/5/20 15:24:28

计算机网络压缩版

计算机网络到现在零零散散也算过了三遍，一些协议大概了解，但总是模模糊糊的印象，现在把自己的整体认识总结一下，（本来想去起名叫《看这一篇就够了》，但是发现网上好的文章太多了，还是看这篇吧&a…...

编程日记 2025/5/17 1:28:31

大语言模型中的Agent；常见的Agent开发工具或框架

大语言模型中的Agent 大语言模型中的Agent是指以大语言模型为核心驱动，具有自主理解、感知、规划、记忆和使用工具等能力，能够自动化执行复杂任务的系统.以下是一些例子： AutoGPT：它相当于一个完整的工具包，可以为各种项目构建和运行自定义AI Agent。使用OpenAI的GPT-4和…...

编程日记 2025/5/19 22:00:19

设计模式-备忘录模式

背景游戏角色恢复问题：角色有攻击力和防御力，在Boss站前保存攻击力和防御力，大战之后，攻击力和防御力下降，从备忘录恢复到大战前的状态。传统思路： 一个游戏对象，对应一个保存状态对象。 …...

编程日记 2025/5/15 9:41:02

重温设计模式--状态模式

文章目录状态模式（State Pattern）概述状态模式UML图作用：状态模式的结构环境（Context）类：抽象状态（State）类：具体状态（Concrete State）类&#x…...

编程日记 2025/5/19 14:28:48

JS、JSX 和 TSX 的对比指南

1. JavaScript (.js)

简介

优点

缺点

使用场景

2. JSX (.jsx)

简介

优点

缺点

使用场景

3. TSX (.tsx)

简介

优点

缺点

使用场景

选择建议

总结

相关文章：