React 组件
组件就像返回 HTML 元素的函数。
React 组件
组件是独立且可重用的代码片段。它们与 JavaScript 函数的作用相同，但在隔离状态下工作并返回 HTML。
组件有两种类型：类组件和函数组件，在本教程中，我们将重点介绍函数组件。
在较旧的 React 代码库中，您可能会发现主要使用类组件。现在建议使用函数组件以及 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 组件
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);属性
组件可以作为 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 />);
