函数组件和类组件以及使用

函数组件和类组件都是非常常见的组件类型。在本文中，我们将详细介绍这两种组件类型。

函数组件

函数组件是一种定义组件的方式，它只是一个 JavaScript 函数。函数组件接收一个 props 对象作为参数，并返回一个 React 元素。函数组件通常比类组件更简单，因为它们没有 state 和生命周期方法。

下面是一个简单的函数组件示例：

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

在上面的示例中，我们定义了一个名为 Welcome 的函数组件，它接收一个名为 props 的对象作为参数，并返回一个 h1 元素，其中包含了 props 中的 name 属性值。在其他组件中使用 Welcome 组件时，可以通过传递 name 属性的值来定制其显示内容。

值得注意的是，React 中的函数组件还支持 React Hooks，这使得函数组件可以拥有类组件中的一些功能，例如 state 和生命周期方法。下面是一个使用 Hooks 的函数组件示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

export default Counter;

在上面的示例中，我们使用 useState Hook 来添加了一个名为 count 的状态变量，并使用 setCount 方法来更新该变量的值。在组件中使用 count 变量来显示当前点击次数，并通过 onClick 事件来触发 increment 函数，从而更新 count 变量的值。

类组件

类组件是一种通过 ES6 类定义的组件。类组件通过继承 React.Component 类来获得 React 的特性，例如 state 和生命周期方法。

下面是一个简单的类组件示例：

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

在上面的示例中，我们定义了一个名为 Welcome 的类组件，它继承自 React.Component 类，并实现了 render 方法来返回一个 h1 元素，其中包含了 props 中的 name 属性值。

与函数组件不同的是，类组件需要使用 this 关键字来访问 props 和 state 变量。此外，类组件还可以定义生命周期方法，例如 componentDidMount 和 componentWillUnmount 等方法，来控制组件的生命周期行为。

下面是一个使用生命周期方法的类组件示例：

import React from 'react';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <h1>It is {this.state.date.toLocaleTimeString()}.</h1>;
  }
}

export default Clock;

在上面的示例中，我们定义了一个名为 Clock 的类组件，它包含了一个名为 date 的状态变量，并使用 setInterval 方法来定时更新该变量的值。在组件渲染时，使用 this.state.date 来显示当前时间，并在组件卸载时清除定时器。

组件的使用

定义好组件之后，可以在其他组件中使用它。在使用组件时，需要先将其导入到当前组件中，然后通过标签的方式来渲染该组件。例如，在 App 组件中使用 Welcome 组件的示例代码如下：

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

export default App;