React 中的 setState 和 prevState

Rana Hasnain Khan 2022年12月21日 2022年5月18日
React 中的 setState 和 prevState

我们将介绍 setStateprevState 并在 React 中使用它们。

React 中的 setStateprevState

setState()prevState()useState 钩子,用于更改 React 类组件中的状态。

setState() 表示该组件及其子组件发生了变化,需要使用更新后的状态重新渲染。setState 是用于更新 UI 以响应事件处理程序和服务器响应的主要方法。

prevState()setState 相同,但它们之间的唯一区别是,如果我们想根据该组件的先前状态更改该组件的状态,我们使用 this.setState(),它为我们提供了 prevState

让我们检查一个计数器应用程序的示例。这可以增加、减少、重置数字。

首先,我们将创建一个新文件 Counter.js。在 Counter.js 我们将 import React from "react"; 并创建一个名为 Counter() 的函数。

Counter() 中,我们将初始化我们的常量 initialNumnumsetNum

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);
}

我们将返回带有按钮和计数器显示的 HTML。因此,Counter.js 将如下所示。

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum(num + 1)}>Increment</button>
      <button onClick={() => setNum(num - 1)}>Decrement</button>
    </div>
  );
}
export default Counter;

让我们在 App.js 中包含 Counter.js 并添加它的组件。App.js 将如下所示。

# react
import "./styles.css";
import Counter from "./Counter.js";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

现在,让我们测试一下我们的计数器。

输出:

使用 setState 的计数器应用程序

让我们添加另一个按钮,将计数器增加 5。

# react
 <button onClick={IncrementByFive}>Increment By 5</button>

让我们创建一个函数 IncrementByFive

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(num + 1);
    }
  };

此函数将循环五次以将其递增 5。

现在,让我们测试我们的计数器应用程序。

输出:

使用 setState 的具有 incrementbyfive 函数的计数器应用程序

当我们点击 Increment by 5 按钮时,它只会将计数器增加 1。

这是因为在 setNum(num + 1); 有多个 setNum 调用,因此 React 将所有这些调用分组并仅在最后一次调用 setNum 时更新状态,并且因为在最后一次调用中 setNum 尚未更新并且仍然具有相同的值,所以它仅将其增加 1。

这就是 prevState 派上用场并像冠军一样解决我们的问题的时候。现在,让我们使用 prevState 重写我们的计数器应用程序。

基本上,我们不是传入新状态变量的值,而是传入一个可以访问旧状态值的函数。因此,现在我们将通过更改 setNum(num + 1); 来更改 IncrementByFive 函数到 setNum(prevNum => prevNum + 1);

因此,我们的函数将如下所示。

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(prevNum => prevNum + 1);
    }
  };

现在,让我们测试我们的计数器应用程序。

输出:

使用 prevState 的具有 incrementby5 函数的计数器应用程序

在上面的结果中,当我们点击 Increment by 5 时,它会增加 5。

让我们也使用 prevState 来更正我们的其他按钮。

Counter.js 如下所示。

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum((prevNum) => prevNum + 1);
    }
  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum((prevNum) => prevNum + 1)}>
        Increment
      </button>
      <button onClick={() => setNum((prevNum) => prevNum - 1)}>
        Decrement
      </button>
      <button onClick={IncrementByFive}>Increment By 5</button>
    </div>
  );
}
export default Counter;

因此,在本指南中,我们了解了可以使用 prevState 解决的问题,并且我们还使用 setStateprevState 在 React 中构建了一个基本的计数器应用程序。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn