React 中如何定义一个组件？

推荐答案

在 React 中，定义组件主要有两种方式：函数组件和类组件。

函数组件

函数组件是最简单的定义组件的方式，它是一个纯函数，接收 props 作为参数，并返回一个 React 元素。

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

类组件

类组件是通过 ES6 的 class 语法定义的，它继承自 React.Component，并且必须实现 render 方法。

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

本题详细解读

函数组件

• 优点：简洁、易于理解和测试，适合用于无状态组件。
• 缺点：在 React 16.8 之前，函数组件无法使用状态和生命周期方法。但自从引入了 Hooks，函数组件也可以使用状态和生命周期方法。

类组件

• 优点：功能强大，可以使用状态和生命周期方法。
• 缺点：相对复杂，代码量较多，适合用于需要管理状态或使用生命周期方法的组件。

选择哪种方式？

• 如果你不需要管理状态或使用生命周期方法，推荐使用函数组件。
• 如果你需要管理状态或使用生命周期方法，可以使用类组件，或者使用函数组件结合 Hooks 来实现。

Hooks 的使用

自从 React 16.8 引入了 Hooks，函数组件也可以使用状态和生命周期方法。例如，使用 useState 来管理状态：

import React, { useState } from 'react';

function Welcome(props) {
  const [name, setName] = useState(props.name);

  return <h1>Hello, {name}</h1>;
}

Hooks 使得函数组件的能力大大增强，逐渐成为 React 开发中的主流方式。