幻空博客

外观

创建组件

复制页面

约 164 字小于 1 分钟

2026-09-16

使用 React 创建组件的方式有两种：函数组件和类组件。

注意文件的后缀需要使用 tsx，否则会报错。

我们约定所有组件的首字母都大写，文件名也要和组件名一致。

通常我们直接使用函数组件即可, 因为类组件的写法比较繁琐，而且函数组件也可以使用 hooks 来实现状态管理和生命周期等功能。

函数组件

function MyComponent() {
  return <div>Hello, World!</div>
}

类组件

import React from 'react'

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>
  }
}