如何在 React 中添加没有构造函数类的 Statefull 组件？

在 React 中，Statefull 组件具有状态和生命周期方法，使得它们可以对输入进行处理，并呈现动态的 UI。

要创建 Statefull 组件，我们通常使用类来定义组件。但是，如果你有一个没有构造函数的类，该怎么做呢？在下面的步骤中，我将向您展示如何使用箭头函数来创建没有构造函数类的 Statefull 组件。

步骤

1. 创建一个箭头函数，该函数返回组件渲染的 JSX。

const Hello = () => {
  return <p>Hello World!</p>;
}

2. 在组件中定义 state 和生命周期方法，以便在需要的时候使用。你可以在 useEffect 钩子中定义生命周期。

import { useState, useEffect } from 'react';

const Hello = () => {
  const [message, setMessage] = useState('Hello World!');

  useEffect(() => {
    console.log('Component mounted!');
  }, []);

  return <p>{message}</p>;
}

在上面的代码中，我们使用 useState 钩子来定义了 message 状态，并用 useEffect 钩子来定义了 componentDidMount 生命周期方法。

3. 在组件的最后，使用箭头函数来导出组件。

export const Hello = () => {
  const [message, setMessage] = useState('Hello World!');

  useEffect(() => {
    console.log('Component mounted!');
  }, []);

  return <p>{message}</p>;
}

现在，你已经创建了一个没构造函数类的 Statefull 组件。你可以将它像任何其他组件一样使用：

import { Hello } from './Hello';

const App = () => {
  return <Hello />;
}

export default App;

以上就是创建没有构造函数类的 Statefull 组件的完整步骤。希望这个简单的指南可以帮助你创建你所需的组件。