网络技术问题 | React.js 测验 | 第 2 组 | 问题 11

介绍

在这个主题中，我们将讨论 React.js 中的一个问题，并提供一些示例代码和解释。这将有助于程序员深入了解、熟悉和理解 React.js 的某些特性和用法。

问题描述

问题 11：下面的代码片段会发生什么？请给出代码运行结果的预测，并解释为什么会这样。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

预测结果

在点击 "Increment" 按钮后，页面上的文本 "Count: 0" 将始终显示 1。每次点击按钮后，文本不会增加。这是因为 setCount 函数是异步的，React 将会处理多个 setCount 调用，将它们合并为单个更新。

解释

React 在更新组件状态时会将多个更新操作合并为一次更新，以提高性能。当调用 setCount(count + 1) 第一次时，React 会将该更新操作放入队列中。然后，当再次调用 setCount(count + 1) 时，React 会将该更新操作替换为新的值。这样，只会触发一次重新渲染，并且 count 值从 0 变为 1。

如果你想要在更新状态时基于前一个状态进行操作，React 提供了一个函数式更新形式，如下所示：

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
};

使用函数式更新，每个 setCount 调用都会获取前一个状态值 prevCount 的最新值，并基于最新的值进行更新。这样就可以正确地进行递增操作。