跳到主要内容

React 元素与组件

介绍​

在React中，元素和组件是构建用户界面的核心概念。它们是React应用的基石，理解它们的区别和用法对于掌握React至关重要。

  • React元素：是描述屏幕上显示内容的最小单位。它们是不可变的，通常通过JSX语法创建。
  • React组件：是可重用的代码块，用于封装UI逻辑和结构。组件可以包含多个元素，并且可以接受输入（称为props）并返回React元素。

本文将逐步讲解React元素与组件的概念，并通过实际案例帮助你理解它们的应用。

React 元素​

什么是React元素？​

React元素是React应用中最小的构建块。它们描述了你想在屏幕上看到的内容。React元素是不可变的，这意味着一旦创建，就不能更改其子元素或属性。

创建React元素​

React元素可以通过两种方式创建：

  1. 使用JSX：这是最常见的方式，语法类似于HTML。
  2. 使用React.createElement()：这是JSX的底层实现。

示例：使用JSX创建元素​

jsx
const element = <h1>Hello, World!</h1>;

示例：使用React.createElement()创建元素​

jsx
const element = React.createElement('h1', null, 'Hello, World!');

这两种方式都会创建一个描述<h1>标签的React元素。

React 元素的特点​

  • 不可变性：React元素一旦创建，就不能修改其属性或子元素。
  • 轻量级：React元素是普通的JavaScript对象，不包含复杂的逻辑。
  • 描述性：它们描述了UI的结构，而不是实际的DOM节点。

React 组件​

什么是React组件？​

React组件是可重用的代码块，用于封装UI逻辑和结构。组件可以接受输入（称为props）并返回React元素。组件可以是函数组件或类组件。

函数组件​

函数组件是最简单的组件形式。它是一个JavaScript函数，接受props作为参数，并返回一个React元素。

示例：函数组件​

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

类组件​

类组件是使用ES6类定义的组件。它们可以包含状态和生命周期方法。

示例：类组件​

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

组件的组合​

组件可以嵌套和组合，以构建复杂的UI。例如，你可以创建一个App组件，它包含多个Welcome组件。

示例：组件组合​

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

实际案例​

案例：构建一个简单的待办事项列表​

让我们通过一个简单的待办事项列表来展示React元素与组件的实际应用。

步骤1：创建TodoItem组件​

jsx
function TodoItem(props) {
  return <li>{props.text}</li>;
}

步骤2：创建TodoList组件​

jsx
function TodoList() {
  const todos = ['Learn React', 'Build a project', 'Deploy to production'];
  return (
    <ul>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo} />
      ))}
    </ul>
  );
}

步骤3：在App组件中使用TodoList​

jsx
function App() {
  return (
    <div>
      <h1>My Todo List</h1>
      <TodoList />
    </div>
  );
}

输出​

html
<div>
  <h1>My Todo List</h1>
  <ul>
    <li>Learn React</li>
    <li>Build a project</li>
    <li>Deploy to production</li>
  </ul>
</div>

总结​

  • React元素是描述UI的最小单位，不可变且轻量级。
  • React组件是可重用的代码块，用于封装UI逻辑和结构。
  • 组件可以是函数组件或类组件，并且可以嵌套和组合以构建复杂的UI。

通过理解React元素与组件的概念，你可以开始构建动态和可维护的用户界面。

附加资源与练习​

练习​

  1. 创建一个Button组件，接受text和onClick作为props，并在点击时显示一个提示框。
  2. 扩展待办事项列表，允许用户添加新的待办事项。

资源​