如何在 React 中使用和操作状态？

React 中的组件提供了 JSX（如果你是初学者，认为它有点类似于 HTML），它可以包含 HTML 标签和 javascript 表达式，ReactDOM 以某种方式处理它并相应地在前端显示一些东西。一切正常，直到您只需要显示静态内容，但是如果您的网站是动态的并且您必须根据用户交互在前端更改某些内容，在这种情况下，您可以使用事件和事件处理程序之类的东西进行交互用户或者其他一些内部的东西，比如动态调整等等。但是你怎么去告诉 ReactDOM，根据用户交互发生的一些变化来显示一些东西。

方法：使用 ReactDOM 重新渲染组件的方法是通过状态更改。它是 react 组件中的一个内置对象，它具有一些预定义的功能，并包含有关将在前端呈现的 UI 的一些信息，它还控制组件的整个行为。我们可以利用 state 对象向组件抛出信息，以便 ReactDOM 可以根据该信息进行渲染，基本上，它是组件的动态数据存储。我们还可以在内部管理用于不同目的的状态，状态变化力对调用渲染函数和其他生命周期方法/钩子（在功能组件的情况下）做出反应。

创建反应应用程序并安装模块：

第 1 步：创建 React 应用程序

npx create-react-app state-demo

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd state-demo

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

现在首先我们将了解如何使用类组件创建和操作状态。

1.初始化状态：

句法：

• 在构造函数中初始化状态对象

  constructor() {
      super();  // Don’t Forget to pass props if received
      this.state = {
          // Any object
      };
  }

• 使用类属性初始化状态对象

  class MyComponent extends React.Component {
      state = {
          // any object
      };
  }

2.访问状态：我们可以使用“ this.state”访问组件中任何地方的状态对象，状态是本地的，所以不要试图从外部组件访问它，如果你需要它在外面那么你可以通过它传递道具。

3. 操作状态：类组件为我们提供了一个setState函数，我们可以在组件的任何地方调用它来操作状态。

• 在调用 setState 时使用提供的对象作为参数更改状态对象。

  this.setState({
      // anyobject
  });

• 当我们必须根据先前的状态进行更新时，我们传递一个获取先前状态作为参数的函数。

  this.setState((prevState) => {
      // Do return a new state object 
      // after some manipulations 
  });

• setState 动作是异步的，因此当我们必须在状态更新后严格执行某些操作（获取动态内容、内部更改组件等）时，我们将回调函数作为第二个参数传递给 setState函数。

示例：在此示例中，我们使用基于类的组件并打印一行以指示回调函数在状态更新后立即执行，这可以在我们必须在状态更新后严格执行某些代码时使用，一个简单的用例这个场景可以通过 API 获取任何动态内容，即当我们从 GFG 主页点击算法部分时，它会获取所有主题的列表，这可以通过设置算法按钮的 setState 回调函数中的 GET 请求来完成点击。

App.js

import React from 'react';
import ReactDOM from 'react-dom';
  
class MyComponent extends React.Component {
    constructor(){
        super();
  
        this.state = {
            clicked:0
        }
    }
    stateManipulater = ()=>{
        this.setState((prevState)=>{
           return {clicked:prevState.clicked+1};
        }, ()=>{            
        console.log("This line will only get "
          + "printed after state gets updated");  
        })
    }
  
 render (){
    return 
Illustration of Working with State!
 
          
    

        This Button is associated with an integer state 
        which increments on click and UI re-renders 
        accordingly
    
  
    
        {`Clicked ${this.state.clicked} Times`} 
    
 }
}
  
ReactDOM.render(
    ,    // What to Display
    document.getElementById('root')   // Where to Display
);

输出：

说明：这是上面代码的输出，点击按钮后，会生成调用 this.setState函数来操作状态的事件，然后立即执行作为第二个参数传递给 this.setState 的回调函数，并且该行打印在控制台上。

现在我们将看到如何在功能组件中使用和操作状态。

句法：

1. 初始化状态：我们有 useState 挂钩来处理功能组件中的状态，useState 接收初始状态作为参数并返回状态变量以及稍后可用于设置与其关联的状态的函数。

const [state, setState] = useState(intialState);

// Note:- You are not restricted to name state variable
// as "state" and function as "setState"

2.访问状态：我们可以直接在函数组件中的任何地方访问带有名称的状态，如“状态”。

3. 操纵状态：我们从useState接收到的函数用于操纵关联的状态变量。

• 调用时使用提供的对象作为参数更改状态对象。

setState(arg);

• 当我们必须根据先前的状态进行更新时，我们传递一个获取先前状态作为参数的函数。

setState((prevState)=>{
    // Do return a new state object after some manipulations 
});

• 与类不同，功能组件不会在状态更改时向我们提供回调，但 useEffect 挂钩可用于实现相同功能，只要依赖数组中的某些内容发生更改，useEffect 就会调用给定函数。

示例：在此示例中，我们打印一行以指示回调函数在状态更新后立即执行，这可以在我们必须在状态更新后严格执行某些执行时使用，此场景的一个简单用例可以是获取通过 API 的任何动态内容，即。当我们点击 GeeksforGeeks 主页上的算法部分时，它会获取所有主题的列表，这可以通过 setState 的回调函数中的 GET 请求来完成，该函数设置点击的算法按钮。

应用程序.js

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
  
function MyComponent (){
    const [state, setState] = useState({clicked:0});
  
    const stateManipulater = ()=>{
        setState((prevState)=>{
           return {clicked:prevState.clicked+1};
        })
    }
    useEffect(()=>{    
        console.log("This line will only get "
        + "printed after state gets updated");  
    }, [state])
  
    return 
Illustration of Working with State!
 
        

            This Button is associated with an integer
            state which increments on click and UI 
            re-renders accordingly 
        
  
         
        {`Clicked ${state.clicked} Times`} 
    
}
  
ReactDOM.render(
    ,    // What to Display
    document.getElementById('root')   // Where to Display
);

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

npm start

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

说明：这是上面代码的输出，在单击按钮后，事件处理程序会立即更改状态，然后，组件立即注意到 useEffect 的依赖数组中的某些内容已更改，因此立即执行其功能我们只在其中写入了控制台日志，因此该行在状态更改后立即打印。

使用状态时要记住的要点：

1.永远不要显式地改变State，因为这样react就无法观察到状态的变化，组件的行为也不会受到影响，所以一定要使用组件提供的setState函数。

2. 如您所知，状态更改会导致组件重新渲染，因此请始终关注状态更改的地方，有时小错误可能会导致额外的或在最坏的情况下无限重新渲染，从而使您的应用程序慢点。

3. 如果状态对象或数组中有多个元素，并且您只需要更改一个元素，那么不要忘记传播数据，否则它将用该单个元素覆盖对象/数组，因为状态更新为浅合并。

4. 更新状态后不要依赖状态肯定更新的事实，在某些情况下，由于 REACT 的内部工作可能需要一点时间，所以如果你立即使用更新状态确实会创建你自己。