如何在 React 中添加不使用构造函数类的有状态组件?

react jsjavascript libraryfront end technology更新于 2024/12/28 1:48:17

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

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

使用 JS 类。
使用函数式组件。

在 React v16 之前，无法向函数式组件添加状态。但自从 React Hooks 诞生以来，我们也可以编写有状态的函数式组件。

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

有状态的函数式组件比类组件更简单、更轻量级，它们是在 React 中创建有状态组件的推荐方法。它们易于编写、理解、测试和调试。

方法

使用 function 关键字创建函数式组件。

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 钩子。