如何在 ReactJS 中本地管理组件的状态？

组件的本地状态：任何组件都是 ReactJS，主要依靠它的 props 和 state 来管理数据。组件的状态对它来说是私有的，并负责管理其整个生命周期的行为。状态只不过是记录反应应用程序中任何数据更改的结构。它可用于存储值、表单输入、来自 API 的数据等。组件内的这种本地状态管理不会受到其他组件的影响。

方法：为了在基于类的组件中本地管理组件的状态，我们实例化一个本地状态对象，该对象包含我们需要在组件中使用的所有状态变量。这些局部状态变量可以使用 setState函数进行更新。仅使用 setState函数更改本地状态非常重要，因为只有这样 React 才会触发组件重新渲染，这对于更新应用程序状态至关重要。

创建一个新的反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app react-local-state

• 第 2 步：创建项目文件夹（即 react-local-state）后，使用以下命令移动到该文件夹：

  cd react-local-state

项目结构：它将如下所示。

示例：让我们看一个示例来了解如何在本地管理组件的状态。在我们的示例中，我们将考虑一个初始值为 0 的值。我们可以通过增加它（增加 1）或减少它（减少 1）来更新这个“值”状态。现在要增加或减少这个值，我们将使用 setState函数来触发组件重新渲染，以确保对我们的状态（值）的任何更新都会反映在屏幕上。

App.js

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  
  incrementValue = () => {
    this.setState((state) => ({
      value: state.value + 1,
    }));
  };
  
  decrementValue = () => {
    this.setState((state) => ({
      value: state.value - 1,
    }));
  };
  
  render() {
    return (
      

        

          
Local State in ReactJS
          
The value managed locally is: {this.state.value}
          

            
               Increment!
            {" "}
            
               Decrement!
            
          
        
      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并访问 http://localhost:3000/，您将看到以下输出：