JSX 语法基础

学习 JSX 语法，掌握 React 开发的基础语言。JSX 是 JavaScript 的语法扩展，让你能够以类似 HTML 的方式编写组件。

基础语法
条件渲染
列表渲染
事件处理
Fragments
样式处理
📚 JSX 语法规则

核心规则：

  • 必须有一个根元素（或使用 Fragment）
  • 所有标签都必须闭合
  • 使用 camelCase 命名属性
  • 使用 嵌入 JavaScript 表达式
  • class 属性要写成 className
💻 代码示例
// 1. 基本 JSX 语法
const element = <h1>Hello, World!</h1>;

// 2. JSX 中嵌入表达式
const name = 'React';
const element = <h1>Hello, {name}!</h1>;

// 3. JSX 属性
const element = <img src="image.jpg" alt="描述" />;

// 4. JSX 子元素
const element = (
  <div>
    <h1>标题</h1>
    <p>段落内容</p>
  </div>
);
🎯 实时演示

基础 JSX 组件

你好, 开发者！

欢迎学习 JSX 语法基础

这个组件演示了基本的 JSX 语法和 props 的使用

💡 最佳实践
使用有意义的 key

列表渲染时使用唯一且稳定的 key，避免使用数组索引

保持组件纯粹

相同的输入应该产生相同的输出，避免副作用

合理拆分组件

单一职责原则，保持组件简单易维护

优先使用 Fragment

避免不必要的包装元素，使用 <> 或 React.Fragment

样式管理

避免大量内联样式，优先使用CSS类和CSS模块

谨慎使用 Refs

只在必要时使用ref，优先考虑声明式编程

转义和安全

React自动转义内容，避免使用dangerouslySetInnerHTML

🔨 动手练习

练习 1: Fragment 优化

重构现有组件，使用Fragment减少不必要的DOM嵌套

初级

练习 2: 动态样式系统

创建一个主题切换组件，支持多种样式配置

中级

练习 3: Ref 实战应用

实现一个富文本编辑器，使用ref控制光标和选择

高级

练习 4: Props 高级处理

创建通用组件，支持props解构、传播和条件属性

中级

练习 5: 安全内容渲染

处理用户输入，实现安全的HTML内容渲染机制

高级

练习 6: 综合应用

构建一个完整的组件库，应用所有JSX高级技术

专家级
⚡ 性能优化提示

JSX 优化技巧

  • 避免在render中创建对象和函数
  • 使用React.memo包装纯组件
  • 合理使用key属性，避免不必要的重渲染
  • 条件渲染时考虑性能影响

常见陷阱

  • ⚠️避免使用数组索引作为key
  • ⚠️不要在循环中使用内联对象样式
  • ⚠️避免深层条件嵌套，影响可读性
  • ⚠️谨慎使用dangerouslySetInnerHTML
下一篇
Next.js 基础