React从基础入门到高级实战：React 基础入门

React从基础入门到高级实战：React 基础入门 - JSX与组件基础

news2025/5/25 21:21:10

JSX 与组件基础

引言

在 React 开发中，JSX 和组件是两个最基础且核心的概念。JSX 是一种独特的语法，让你在 JavaScript 中编写类似 HTML 的代码，而组件则是 React 应用的基本构建块，帮助你将复杂的界面拆分为可复用的模块。本文将带你深入理解 JSX 的语法规则，并学习如何创建和使用 React 组件。通过本文，你将能够编写自己的组件，为后续的 React 开发打下坚实基础。

1. 什么是 JSX？

JSX（JavaScript XML）是 JavaScript 的语法扩展，允许你在代码中直接编写类似 HTML 的标签结构。它让 React 组件的 UI 编写变得直观且易读。

通俗比喻：
想象 JSX 是 JavaScript 的“画笔”，你可以用熟悉的 HTML 标签“画”出界面，而 React 会把这些“画”变成真实的网页元素。

基本示例：

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

这段 JSX 会在页面渲染一个 <h1> 标题。

2. JSX 语法规则

尽管 JSX 看起来像 HTML，但它有自己的规则：

标签必须闭合：所有标签都需要闭合，比如 <img> 要写成 <img />。
属性命名：使用 camelCase，例如 className（代替 HTML 的 class）、onClick（代替 onclick）。
嵌入表达式：用 {} 将 JavaScript 表达式嵌入 JSX，比如 {name} 或 {1 + 1}。
不支持 if-else：不能直接在 JSX 中写 if-else，但可以用三元运算符或逻辑运算符。

示例：

const name = "React";
const element = <p className="greeting">Hello, {name}!</p>;

渲染结果：<p> 标签显示 “Hello, React!”，并应用 greeting 类样式。

3. JSX 中的表达式

JSX 支持在 {} 中嵌入 JavaScript 表达式，比如变量、函数调用或运算。

示例：

const user = { firstName: 'Jane', lastName: 'Doe' };
const fullName = () => user.firstName + ' ' + user.lastName;

const element = <p>欢迎, {fullName()}!</p>;

渲染结果：“欢迎, Jane Doe!”。

注意：

{} 内只能放表达式，不能放语句（比如 if 或 for）。
可以嵌入数组，React 会自动展平渲染。

4. React 组件基础

React 应用由多个组件组成，每个组件负责渲染一小块 UI，可以组合成复杂界面。组件分为函数组件和类组件，现代 React 更推荐使用函数组件。

4.1 函数组件

函数组件是一个返回 JSX 的 JavaScript 函数。

示例：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

props：父组件传递的数据对象。
组件名需大写开头，如 Welcome。

4.2 类组件（了解即可）

类组件使用 ES6 类语法，包含 render 方法返回 JSX。

示例：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

趋势：有了 Hooks，函数组件更简洁，已成为主流。

5. 组件的创建与复用

组件可以通过嵌套和复用构建复杂 UI。父组件通过 props 向子组件传递数据。

示例：

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

function Welcome(props) {
  return <p>欢迎, {props.name}!</p>;
}

渲染结果：显示两条欢迎消息，分别是 “欢迎, Alice!” 和 “欢迎, Bob!”。

6. 实践：用户卡片组件

让我们通过一个简单的 UserCard 组件实践 JSX 和组件的使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React JSX 与组件基础</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function UserCard(props) {
      return (
        <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
          <h2>{props.name}</h2>
          <p>年龄: {props.age}</p>
          <p>职业: {props.job}</p>
        </div>
      );
    }

    function App() {
      return (
        <div>
          <UserCard name="Alice" age={25} job="工程师" />
          <UserCard name="Bob" age={30} job="设计师" />
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>