组件

Source: Dev.to

什么是组件？

React 中的组件是一个独立、可复用的用户界面片段，负责控制应用视图的某一部分。组件通常以返回 JSX（类似 HTML 的语法）的 JavaScript 函数或类的形式编写。

组件类型

• 函数式组件 – 简单的 JavaScript 函数，返回 JSX。它们是现代 React 中最常使用的方式。
• 类组件 – 继承自 React.Component 的 ES6 类。早期用于管理状态和生命周期方法。

什么是 XML？

XML（可扩展标记语言）是一种用于以结构化格式存储、传输和组织数据的标记语言。它使用标签来描述数据，既可被人类阅读，也可被机器解析。

XML 的使用场景

• 系统之间的数据交换
• 配置文件
• Web 服务（SOAP）
• 文档存储

什么是 JSX？

JSX（JavaScript XML）是 JavaScript 的语法扩展，允许开发者在 JavaScript 中编写类似 HTML 的代码。它主要在 React 中用于描述用户界面。

示例

function Welcome() {
  return 
## Hello User
;
}

使用 JSX 的原因

• 使 UI 代码更易读、易写。
• 允许将 JavaScript 与 HTML 结合在一起。
• 帮助 React 高效地创建 UI 元素。

JS 与 JSX 的区别

JavaScript（JS）是一种编程语言，用于为网页应用添加逻辑、功能和交互性。

JavaScript (JS) 示例

const element = document.createElement("h1");
element.innerText = "Hello User";

JSX（JavaScript XML）是 React 中使用的 JavaScript 语法扩展，允许使用类似 HTML 的语法编写 UI 元素。

JSX 示例

function App() {
  return 
## Hello World
;
}
export default App;