如何使用 JSX 编写 React 组件

2023年5月 · 预计阅读时间： 4 分钟

软件工程师 / B站UP主

在 React 中，我们通常使用 JSX 来编写组件。JSX 是一种类似 HTML 的语法，它可以帮助我们更方便地编写组件，并且可以使代码更加易读和易于维护。在本文中，我们将介绍如何使用 JSX 编写 React 组件，并且将介绍 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 相关知识。

React 框架简介

React 是一个由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化的开发模式，使得开发者可以将一个 Web 应用程序拆分成多个组件，每个组件负责不同的功能，从而使得开发、测试和维护变得更加容易。

React 的主要特点是高效、可重用和灵活。它采用了 Virtual DOM 技术，可以最小化 DOM 操作，从而提高性能。另外，React 还拥有丰富的生态系统，包括 React Router、Redux、React Native 等等，可以帮助开发者更加高效地构建 Web 应用程序、移动应用程序和桌面应用程序等等。

React 的核心概念有组件、Props、State、Hooks 等等。组件是 React 的基本单位，一个组件可以包含其他组件或者 HTML 元素，可以接收 Props 作为输入，可以使用 State 来管理内部状态。

React 在 Web 开发中已经得到了广泛的应用，在许多公司和开发者中都受到了欢迎。它的特点是使得 Web 应用程序变得更加易于维护、可重用和可测试，同时提高了应用程序的性能和用户体验。

JSX 简介

JSX（JavaScript XML）是一种 JavaScript 的扩展语法，它可以让我们在 JavaScript 代码中编写类似 HTML 的标记，用于描述组件的结构和外观。JSX 是 React 推荐的编写组件的方式，也是 React 组件的基础。

在 JSX 中，我们可以使用类似 HTML 的标记语法来描述组件的结构，例如：

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

在这个例子中，我们使用了一个类似 HTML 的标记来定义一个 h1 标题，然后将它赋值给了一个变量 element。这个变量可以被用作 React 组件的一部分。

为什么用 JSX

使用 JSX 有以下几个优点：

可读性强：使用类似 HTML 的标记来描述组件的结构，使得代码更加易读、易于理解和维护。
便于编写组件：使用 JSX 使得编写组件变得更加容易和直观，我们可以将组件拆分成多个小的组件，并且可以更好地组织和管理组件之间的关系。
可以使用 JavaScript 表达式：JSX 中可以使用 JavaScript 表达式，这使得我们可以在组件中使用变量、函数和逻辑语句等等，从而使得组件更加灵活和可复用。
可以进行编译优化：通过使用 JSX，React 可以进行编译优化，例如通过使用虚拟 DOM 来最小化 DOM 操作，从而提高了应用程序的性能和响应速度。
统一组件语法：使用 JSX 使得组件的语法更加统一和一致，从而使得组件之间的交互更加容易和直观。

JSX 与 HTML 的区别

JSX 与 HTML 虽然极其相似，但也有一些不同之处。首先，JSX 中的标签名可以是任何有效的变量名（标识符），不必是 HTML 中的标签名。其次，JSX 中的属性推荐使用驼峰命名法。最后，JSX 中可以使用 JavaScript 表达式，例如在 JSX 中使用变量和函数等。

以下是一个使用 JSX 编写的 React 组件的示例：

function Greeting() {
  return <h1>Hello, Zhang San!</h1>;
}

在这个示例中，我们定义了一个 Greeting 组件。在组件中，我们使用了 JSX 的语法来定义一个 h1 标题，显示了一段欢迎文字。

渲染列表

我们不可以直接在 JSX 里边使用 for、while 等循环的方式渲染列表组件，但是可以利用数组的 map 方法。以下是一个使用 JSX 渲染列表的示例：

function TodoList() {

  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a React app' },
    { id: 3, text: 'Deploy to production' }
  ];

  const listItems = todos.map((todo) =>
    <li key={todo.id}>
      {todo.text}
    </li>
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

在这个示例中，我们定义了一个 TodoList 组件，并且将其渲染到了页面上。在组件中，我们使用 map 方法将 todos 数组中的每个元素转换为一个 li 元素，并且将它们保存在一个新的数组 listItems 中。最后，我们将 listItems 数组作为 ul 元素的子元素来渲染列表。

条件渲染

在 React 中，我们可以使用条件语句来实现条件渲染。以下是一个使用 JSX 实现条件渲染的示例：

function Greeting() {
  const isLoggedIn = false;
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  } else {
    return <h1>请登录</h1>;
  }
}

在这个示例中，我们定义了一个 Greeting 组件，并且根据 isLoggedIn （这里写死了它的值）来决定渲染哪个标题。如果 isLoggedIn 为 true，就渲染一个欢迎标题，否则就渲染一个请登录标题。

我们还可以使用三目运算符来进行条件渲染，例如：

function Greeting(props) {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? (
        <h1>欢迎回来!</h1>
      ) : (
        <h1>请登录</h1>
      )}
    </div>
  );
}

注册事件

在 React 中，我们可以使用类似 HTML 原生事件的一些属性，只是命名有些变化，把全部小写变成了第一个单词首字母小写，后面每个单词首字母大写的形式，例如 onclick 变成了 onClick。以下是一个使用 JSX 注册事件的示例：

function Button() {
  function handleClick(e) {
    console.log('点击了按钮');
  }
  return (
    <button onClick={handleClick}>
      按钮
    </button>
  );
}

在这个示例中，我们定义了一个 Button 组件，并且使用 onClick 属性来注册一个点击事件。当用户点击按钮时，控制台将输出一条消息。

注意事件处理函数中的参数，即事件对象，与原生的 HTML 事件不同，它是 React 合成的，用于浏览器兼容性适配。

传递 Props

在 React 中，我们可以使用 props 来给组件传递数据或事件监听函数。以下是一个使用 JSX 传递 Props 的示例：

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

// App.js
<Greeting name="John" />,

在这个示例中，我们定义了一个 Greeting 组件，并且通过 props 来接收一个名为 name 的属性。在组件中，我们可以通过 props.name 来获取这个属性的值，并且将它渲染到标题中。其他组件（如 App）在使用 Greeting 组件的时候，可以通过类似于 HTML 属性的传递方式，来给组件传递 props。

总结

在本文中，我们介绍了如何使用 JSX 编写 React 组件，并且介绍了 JSX 与 HTML 的区别、渲染列表、条件渲染、注册事件和传递 Props 等相关知识。通过使用 JSX，我们可以更加方便地编写组件，并且可以使代码更加易读和易于维护。

React 框架简介​

JSX 简介​

为什么用 JSX​

JSX 与 HTML 的区别​

渲染列表​

条件渲染​

注册事件​

传递 Props​

总结​