React 如何添加一个没有构造类的有状态组件

我们可以通过使用useState钩子来添加一个有状态的组件而不使用构造类。这个钩子允许我们在我们的组件中创建和更新状态，而不需要一个构造函数。要使用这个钩子，我们只需调用useState函数，并传入我们的初始状态作为参数。

主要有两种创建React组件的方式 —

使用JS类。
使用功能组件。

在react v16之前，没有办法向功能组件添加状态。但自从有了React Hooks，我们也可以编写有状态的功能组件。

React中的有状态功能组件是一个定义为JavaScript函数的组件，它使用useState钩子来管理和操作其内部状态。这些组件类似于有状态的类组件，但它们不需要使用类或构造函数。相反，useState钩子被用来初始化状态，而组件可以使用钩子返回的值和函数访问和更新状态。

有状态的功能组件比类组件更简单、更轻便，它们是在React中创建有状态组件的推荐方式。它们很容易编写、理解、测试和调试。

方法

使用函数关键字创建一个功能组件。

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

使用useState钩子来为组件添加状态。useState钩子接收一个初始值作为参数，并返回一个包含两个元素的数组：当前状态和一个更新状态的函数。−

function MyComponent(props) {
   const [count, setCount] = useState(0);
   return (
      <>
         <h1>Hello, {props.name}</h1>
         <button onClick={() => setCount(count + 1)}>Click me</button>
         <p>You have clicked {count} times</p>
      </>
   );
}

根据需要在组件的JSX中使用状态和更新函数：

function MyComponent(props) {
   const [count, setCount] = useState(0);
   return (
      <>
         <h1>Hello, {props.name}</h1>
         <button onClick={() => setCount(count + 1)}>Click me</button>
         <p>You have clicked {count} times</p>
      </>
   );
}

在 index.js 中导入 ‘MyComponent.js’ 文件。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyComponent from "./MyComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <MyComponent />
   </StrictMode>
);

注意 - 你可以在一个功能组件中添加多个状态并使用多个useState挂钩。