手册

React Hooks

What is a Hook? useState useEffect useContext useRef useReducer useCallback useMemo Custom Hooks

首页大前端 React React 教程

组件

阅读2223

更新时间2025-08-20

JSX

类组件

组件就像返回 HTML 元素的函数。

React 组件

组件是独立且可重用的代码。它们的用途与 JavaScript 函数相同，但独立工作并返回 HTML。

组件有两种类型，Class组件和Function组件，在本教程中我们将重点介绍Function组件。

在较旧的 React 代码库中，您可能会发现主要使用 Class 组件。现在建议将函数组件与在 React 16.8 中添加的 Hooks 一起使用。有一个关于类组件的可选部分供您参考。

创建您的第一个组件

创建 React 组件时，组件的名称必须以大写字母开头。

类组件

类组件必须包含 extends React.Component 语句。此语句创建对 React.Component 的继承，并让您的组件访问 React.Component 的函数。

组件还需要一个render()方法，该方法返回HTML。

实例

创建一个名为 Car

的 Class 组件

class Car extends React.Component {
  render() {
    return Hi, I am a Car!;
  }
}

Function 组件

这里是与上面相同的示例，但使用 Function 组件创建。

Function 组件也返回 HTML，其行为方式与 Class 组件非常相似，但 Function 组件可以使用更少的代码编写，更易于理解，并且将在本教程中首选。

实例

创建一个名为 Car

的 Function 组件

function Car() {
  return Hi, I am a Car!;
}

渲染组件

现在你的 React 应用程序有一个名为 Car 的组件，它返回一个

元素。

要在您的应用程序中使用此组件，请使用与普通 HTML 类似的语法:

实例

在"root"元素中显示Car组件:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

道具

组件可以作为道具(props)传递，代表属性。

道具(props)就像函数参数，你将它们作为属性发送到组件中。

您将在下一章了解更多关于道具props 的内容。

实例

使用属性将颜色传递给 Car 组件，并在 render() 函数中使用:

function Car(props) {
  return I am a {props.color} Car!;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

组件中的组件

我们可以在其他组件中引用组件:

实例

在 Garage 组件中使用 Car 组件:

function Car() {
  return I am a Car!;
}

function Garage() {
  return (
    <>
      Who lives in my Garage?
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

文件中的组件

React 就是重用代码，建议将组件拆分为单独的文件。

为此，创建一个带有 .js 文件扩展名的新文件并将代码放入其中:

请注意，文件名必须以大写字符开头。

实例

这是新文件，我们将其命名为 "Car.js":

function Car() {
  return Hi, I am a Car!;
}

export default Car;

为了能够使用 Car 组件，您必须在应用程序中导入该文件。

实例

现在我们在应用中导入"Car.js"文件，就可以像在这里创建的一样使用Car组件了。

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »