React JSX语法入门：组件化开发详解与代码示例

小林子

发布时间：2026-10-13| 6人浏览过

原创

本文以React的Hello World为例，深入解析面向组件的开发模式及JSX语法。通过构建SayHello父组件、UserName输入组件和HelloText展示组件，演示state状态管理、事件代理及组件组合的核心机制，帮助开发者快速掌握React构建用户界面的基础逻辑。

React核心概念概览

React是由Facebook工程师开发的用于构建用户界面的JavaScript库。相较于其他UI框架（如AngularJS），React在底层逻辑和工作方式上存在显著差异。学习React需要理解以下三个核心概念：

面向组件（Component-Based）：将UI元素视为可独立运作且可组合的组件。一个组件可以包含多个内部子组件，形成层级结构。
JSX语法：一种类似XML的JavaScript扩展语法。它并非最终执行的代码，而是需要通过预编译器（JSX转换器）转换为标准的JavaScript代码。
事件委托模型：React采用事件代理机制来捕获和处理DOM事件，提高了性能和管理效率。

实战案例：构建Hello World组件

本节将通过一个具体的“打招呼”应用，拆解组件的设计思路。该应用包含两个主要功能：用户输入用户名，以及系统根据输入展示“Hello, [用户名]”。

第1步：定义父组件 SayHello

目的：作为容器组件，协调子组件的数据流，管理全局状态。

入口与动作：使用 React.createClass 创建组件，需实现三个关键API：

getInitialState：初始化状态数据。SayHello 在此定义了一个名为 data 的状态，初始值为 'World'。
handleNameSubmit：处理来自子组件的事件回调。当收到提交的名称时，更新 data 状态。
render：渲染视图。将 UserName 和 HelloText 组合在一起，并传递 props。

// This is the parent component comprising of two inner components
// One of the component is UserName which is used to allow user to enter their name
// Other component is HelloText which displays the text such as Hello, World
//
var SayHello = React.createClass({
 // This is used to set the state, "data" which is 
 // accessed later in HelloText component to display the updated state
 // 
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
});

第2步：构建输入组件 UserName

目的：负责接收用户输入，并在发生变化时触发父组件的回调。

入口与动作：该组件包含两个方法：

handleChange：监听表单的 onChange 事件。获取输入框的值，清空输入框，并通过 props 将数据传递给父组件的 onNameSubmit 方法。
render：渲染表单结构，包含一个文本输入框，并使用 ref 引用 DOM 节点以获取值。

var UserName = React.createClass({
 handleChange: function() {
  var username = this.refs.username.getDOMNode().value.trim();
  this.props.onNameSubmit({username: username });
  this.refs.username.getDOMNode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onChange={this.handleChange}>
   <div className="input-group input-group-lg">
   <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
   </div>
  </form>
  );
 }
});

第3步：构建展示组件 HelloText

目的：仅负责根据传入的 prop 数据渲染静态文本。

入口与动作：该组件只有一个 render 方法。它从 props 中读取 data 属性，并将其嵌入到 HTML 标签中进行展示。

/* render：包含了展示HelloText组件内容的代码 */
var HelloText = React.createClass({
 render: function() {
  return (
  <div>
   <h3>Hello, {this.props.data}</h3>
  </div>
  );
 }
});