JSX语法详解：组件构建与元素渲染 = 飞龙博客

JSX语法详解：组件构建与元素渲染

(4) feilong.org 修订于2026-07-03 09:19:59 react教程

JSX语法详解：组件构建与元素渲染

什么是JSX？
JSX（JavaScript XML）是React中用于描述UI结构的特殊语法。它本质上是一种JavaScript扩展，通过类似HTML的标记方式编写组件代码，最终被Babel转换为React.createElement()调用。这种语法糖使得开发者能够以更直观的方式构建UI组件。

JSX的核心特性
1. 声明式语法：通过标签描述界面结构，而非操作DOM
2. 嵌入JavaScript表达式：使用

{}

{}

插入动态数据
3. 支持条件与循环：直接在JSX中实现逻辑控制

const element = <h1>Hello, world!</h1>;

1	const element = <h1>Hello, world!</h1>;

JSX基础语法解析
1. 元素声明与组件定义
JSX元素必须用小括号包裹，且首字母大写表示组件。

// 原生HTML标签  
<div>这是一个div</div>

// 自定义组件（需在React中注册）  
<MyComponent props={...} />

// 原生HTML标签

<div>这是一个div</div>

// 自定义组件（需在React中注册）

2. 属性传递与动态内容
属性通过等号赋值，支持嵌入JavaScript表达式。

const name = 'React';  
const element = <h1>欢迎使用{name}</h1>;

1 2	const name = 'React'; const element = <h1>欢迎使用{name}</h1>;

3. 嵌套结构与空元素
多层嵌套需用括号明确层级关系，空元素需闭合。

<div>  
  <p>段落内容</p>  
  <span>{/* 空元素 */}</span>  
</div>

<div>

</div>

组件构建实践
1. 函数组件与类组件
JSX可直接在函数组件中使用，无需额外包装。

// 函数组件示例  
function Welcome({ name }) {  
  return <h1>欢迎{name}</h1>;  
}  

// 类组件示例  
class Greeting extends React.Component {  
  render() {  
    return <h2>你好,{this.props.name}</h2>;  
  }  
}

// 函数组件示例

function Welcome({ name }) {

return <h1>欢迎{name}</h1>;

}

// 类组件示例

class Greeting extends React.Component {

render() {

return <h2>你好,{this.props.name}</h2>;

}

2. 组件组合与复用
通过嵌套和props传递实现模块化开发。

function App() {  
  return (  
    <div className="container">  
      <Header title="React应用" />  
      <MainContent content={data} />  
    </div>  
  );  
}

function App() {

return (

</div>

);

}

元素渲染进阶技巧
1. 条件渲染与循环
使用三元运算符或map()实现动态内容生成。

{isLoggedIn ? (  
  <Profile user={user} />  
) : (  
  <Login onAuth={handleLogin} />  
)}

<ul>  
  {items.map(item => (  
    <li key={item.id}>{item.name}</li>  
  ))}  
</ul>

{isLoggedIn ? (

) : (

)}

<ul>

{items.map(item => (

))}

</ul>

2. 样式处理与事件绑定
内联样式需使用对象形式，事件名需驼峰命名。

<div style={{ color: 'blue', fontSize: '16px' }}>  
  <button onClick={handleClick}>点击</button>  
</div>

</div>

JSX转换原理揭秘
Babel将JSX编译为React.createElement()调用，具体流程如下：
1. 解析JSX语法结构
2. 转换为React.createElement()调用链
3. 生成虚拟DOM节点

// JSX代码  
const element = <div>Hello</div>;

// Babel转换后  
const element = React.createElement('div', null, 'Hello');

// JSX代码

const element = <div>Hello</div>;

// Babel转换后

const element = React.createElement('div', null, 'Hello');

最佳实践建议
1. 避免直接操作DOM：全部UI更新通过JSX完成
2. 组件化开发原则：每个组件应封装单一功能
3. 严格遵循React规则：如key属性必须唯一、禁止修改props等

总结
JSX作为React的核心语法，通过声明式编程范式极大提升了开发效率。理解其底层原理与使用规范，有助于编写更高效、可维护的组件代码。掌握JSX的嵌套结构、动态内容处理及组件组合技巧，是构建复杂UI界面的基础能力。

> 注：本文示例基于React 18+版本，部分语法可能因框架更新而变化，请以官方文档为准。

更新网址：https://feilong.org/jsx-syntax-react-components
最初发布：20260703 09:19:59 feilong.org 于广州

加入收藏夹，查看更方便。

新作：组件化开发实践：函数组件与类组件对比

旧文：React基础入门：核心概念与环境搭建

飛龍博客