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

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

输出

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程