React Components的使用

2024-06-07 03:34PM

参考：https://www.w3schools.com/react/react_components.asp

Component 有两种类型，分别是：Class Component（类组件） 和 Function Component（函数组件）。

在版本较老的 React 代码中，一般主要使用 Class Component（类组件），但是现在建议将 Function 组件与 Hooks 一起使用。

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

eg：

1. Class Component （类组件）

类组件必须包含 extends React.Component 陈述。此语句创建对 React.Component的继承，并使用你的组件能够访问 React.Component 的函数，不过该组件还需要一个 render() 方法，该方法用于返回HTML。

创建一个名为 Car 的类组件：

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

 2. Function Component（函数组件）

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

创建一个名为 Car 的函数组件：

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

export default Car;