react jsx写法

React JSX 是一种在 JavaScript 中编写类似 HTML 的语法，它允许我们在组件中直接编写 HTML 结构。以下是 React JSX 的常见写法：

使用标签表示元素：可以使用标签来表示 React 元素，例如 <div> 表示一个 <div> 元素。

<div>Hello World!</div>
登录后复制

使用花括号插入 JavaScript 表达式：可以在标签内使用花括号 {} 插入 JavaScript 表达式。

<div>{2 + 2}</div>
登录后复制

使用属性传递数据：可以在标签上使用属性来传递数据给组件。

<MyComponent name="John" age={25} />
登录后复制

使用 className 替代 class：由于 class 是 JavaScript 的保留字，所以在 JSX 中要使用 className 来添加 CSS 类名。

<div className="container"></div>
登录后复制

使用注释：可以使用花括号和双斜线来添加注释。

<div>
{/* 这是一个注释 */}
</div>
登录后复制
注意：JSX 是一种语法糖，最终会被转译为普通的 JavaScript 代码运行。

相关问题

vue2使用jsx写法不如template写法

Vue2 中 JSX 写法与 Template 写法的区别及性能对比
一、语法结构差异
在 Vue2 中，JSX 和 Template 是两种不同的模板定义方式。

Template 使用 HTML-like 的字符串来描述 UI 层级关系，适合前端开发者熟悉的标准 HTML/CSS 开发模式[^4]。
JSX 则是一种 JavaScript 表达式的扩展形式，允许通过函数调用来动态构建组件树[^1]。

以下是两者的简单示例：
<!-- Template 示例 -->
<template>
<div>{{ message }}</div>
</template>

<script>
export default {
data() {
return { message: 'Hello, world!' };
}
};
</script>
登录后复制
// JSX 示例
import React from 'react';

export default {
data() {
return { message: 'Hello, world!' };
},
render(h) {
return (
<div>{this.message}</div>
);
}
}
登录后复制
二、功能灵活性对比

Template 提供了一种声明式的方式编写视图逻辑，易于阅读和维护，尤其对于简单的场景非常友好。
JSX 更加灵活，可以利用 JavaScript 的全部特性（如条件渲染、列表映射等），特别适用于复杂业务逻辑或需要高度动态化的场景。

例如，在 JSX 中可以通过三元运算符轻松实现条件渲染：
render(h) {
return this.show ? <span>Visible</span> : null;
}
登录后复制
而在 Template 中则需借助 <template> 标签配合 v-if 指令完成相同的功能:
<template v-if="show">
<span>Visible</span>
</template>
登录后复制
三、性能表现分析
从编译后的运行效率来看，两者最终都会被转换为相同的虚拟 DOM 节点创建过程——即所谓的 h() 函数调用[^2]。因此理论上它们之间的性能差距微乎其微。然而实际开发过程中仍存在一些细微差别需要注意:

解析开销: 对于大型应用而言，由于 SFC 文件中的 <template> 部分需要额外经过 AST 解析阶段才能生成对应的 Render Function ，这可能会稍微增加初始加载时间；而直接书写 JSX 可跳过此步骤从而提高冷启动速度[^3]。

调试体验: 当出现问题时，基于 JS 的错误堆栈更容易定位具体位置，因为它是纯代码而非模板字符串转化而来。

工具链依赖: 如果选择使用 JSX 方式，则可能还需要引入 Babel 插件或者其他预处理器来进行兼容处理，增加了项目的配置复杂度。

综上所述，在考虑选用哪种方法之前应该权衡团队成员的技术背景以及项目需求特点再做决定。
四、适用场景建议

若追求直观易懂且团队普遍具备良好 HTML 基础的情况下，优先采用 Template 技术路线；
如遇到频繁变动的需求或是希望充分利用现代编程范型优势的地方，则可尝试切换至 JSX 实现方案。

react class写法

定义React类组件
在React中，可以通过继承React.Component来定义一个类组件。此类组件不仅能够拥有状态(state)，还能利用生命周期方法提升应用的功能性和性能。
import React, { Component } from 'react';

class Example extends Component {
constructor(props) {
super(props);
this.state = {
message: "Hello!"
};
}

componentDidMount() {
console.log('Component did mount');
}

render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.state.message}</p>
</div>
);
}
}

export default Example;
登录后复制
在这个例子中，创建了一个名为Example的类组件[^1]。此组件接收属性(props)作为输入参数，并维护内部的状态(state)。构造函数内初始化了组件的状态，在这里设置了一条消息用于展示。当组件首次加载到页面时，componentDidMount()会被自动调用，可用于执行诸如数据获取之类的操作[^2]。
为了使这个组件可以被其他文件使用，最后将其导出为默认模块的一部分。