React 组件
组件就像返回 HTML 元素的函数。
React组件
组件是独立且可重用的代码位。它们与 JavaScript 函数具有相同的用途，但独立工作并返回 HTML。
组件有两种类型，类组件和函数组件，在本教程中我们将重点关注函数组件。
在较旧的 React 代码库中，您可能会发现主要使用类组件。现在建议将 Function 组件与 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>;
}
}
功能组件
这是与上面相同的示例，但使用 Function 组件创建。
函数组件也返回 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在下一章中。
示例
使用属性将颜色传递给 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 />);
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!