react component初探 | 青训营笔记

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

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

组件有两种类型，类组件和函数组件。

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

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

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

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

函数组件

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

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

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

渲染组件

现在您的 React 应用程序有一个名为 Car 的组件，它返回一个 <h2>元素。

要在您的应用程序中使用此组件，请使用与普通 HTML 类似的语法： <Car />

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Props

component可以作为 传递props，代表属性。

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

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

组件中的组件

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

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 就是关于重用代码，建议将我们的component

拆分成单独的文件。

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

文件名必须以大写字符开头。

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

为了能够使用 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 />);