3. 简单理解React和JSX

category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 08:15 AM
summary
icon

前端开发人员,可能听说过比较多的就是vue、angularjs、react,其中国内最主流的就是vue,这里不赘述框架的对比,感兴趣的可以在网上查阅几种技术框架的区别。
这篇文章着重介绍React的开发与传统Html开发的不同,您可以做一个简单的了解,可以避免很多开发过程中的错误。
React的JSX和普通的HTML网页开发有以下五点不同,分别是语法不同、动态渲染、组件化、数据绑定、生态系统。

1. 语法不同:

JSX是一种JavaScript的语法扩展,它允许在JavaScript代码中直接使用类似HTML的标记来描述UI组件。而普通的HTML则是一种独立的标记语言。
JSX代码示例:
HTML代码示例:

2. 动态渲染

在React中,可以通过JSX动态地生成UI组件,而在普通的HTML中,页面的结构是静态的,不支持动态渲染。
JSX代码示例:
HTML代码示例:

3. 组件化

在React中,可以将UI组件拆分成小的、可复用的组件,并通过组合这些组件来构建复杂的UI。而在普通的HTML中,没有类似于组件的概念,页面的结构通常是以静态HTML文件的形式存在。
JSX代码示例:
这个Button组件可以任意重复地在其它布局或组件中使用。
HTML代码示例:

4. 数据绑定

在React中,可以通过数据绑定将组件的状态与UI的展示进行关联,实现UI的自动更新。而在普通的HTML中,需要手动更新DOM节点来实现UI的更新。
JSX代码示例:
HTML代码示例:

5. 生态系统

React拥有庞大的生态系统,包括大量的第三方库和工具,可以方便地进行组件开发、状态管理、路由控制等。而在普通的HTML开发中,可能需要手动编写大量的JavaScript代码来实现这些功能。
总之,React的JSX相比普通的HTML网页开发更加灵活、高效、易于维护,适用于构建大型、复杂的Web应用程序。
2. 创建您的主题4. NextJs是什么
  • Twikoo
  • Giscus
  • Cusdis