React 组件
组件就像是返回 HTML 元素的函数。
React 组件
组件是独立的、可重用的代码块。它们的作用与 JavaScript 函数相同，但独立工作并返回 HTML。
组件有两种类型：类组件和函数组件。在本教程中，我们将重点关注函数组件。
在旧的 React 代码库中，您可能会发现主要使用类组件。现在建议使用函数组件以及 Hooks，Hooks 在 React 16.8 中被添加。这里有一个关于类组件的可选部分供您参考。
创建您的第一个组件
创建 React 组件时，组件名称必须以大写字母开头。
类组件
类组件必须包含 extends React.Component 语句。此语句创建到 React.Component 的继承，并使您的组件能够访问 React.Component 的函数。
该组件还需要一个 render() 方法，该方法返回 HTML。
示例
创建一个名为 Car 的类组件
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
函数组件
这是与上面相同的示例，但使用了函数组件创建。
函数组件也返回 HTML，并且与类组件的运行方式大致相同，但函数组件可以使用更少的代码编写，更容易理解，并且在本教程中会受到青睐。
示例
创建一个名为 Car 的函数组件
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
渲染组件
现在您的 React 应用程序有了一个名为 Car 的组件，该组件返回一个 <h2> 元素。
要在您的应用程序中使用此组件，请使用与普通 HTML 类似的语法：<Car />
示例
将 Car 组件显示在“root”元素中
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);Props
组件可以作为 props 传递，props 代表属性。
Props 就像函数参数一样，您将它们作为属性发送到组件中。
您将在下一章了解更多关于 props 的信息。
示例
使用属性将颜色传递给 Car 组件，并在 render() 函数中使用它
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
组件中的组件
我们可以在其他组件中引用组件
示例
在 Garage 组件中使用 Car 组件
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
文件中的组件
React 关注代码重用，因此建议将组件拆分成单独的文件。
为此，请创建一个带有 .js 文件扩展名的新文件，并将代码放在其中。
请注意，文件名必须以大写字母开头。
示例
这是新文件，我们将其命名为“Car.js”
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
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(<Car />);
