React基础 第十三章（State更新队列）

React中的批处理机制

当我们在事件处理函数中连续调用setState方法时，React会将这些更新合并成一个更新来进行处理，这就是所谓的批处理机制。这意味着无论我们调用了多少次setState，实际上组件只会重新渲染一次，这有助于提高应用程序的性能。

然而，这里有一个常见的误区。如果我们在事件处理函数中连续多次更新同一个state，而且是基于当前state的值来更新，那么我们可能不会得到预期的结果。

技巧：

• 利用React的事件处理机制，将多个state更新放在一个事件处理函数中。

示例：

function Counter() {
  const [number, setNumber] = useState(0);

  function handleIncrement() {
    // 这里尝试将number+1连续执行3次，但实际上只会执行1次setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
    setNumber(number + 1);
  }

  return (
    <>
      <h1>{number}</h1>
      <button onClick={handleIncrement}>+3</button>
    </>
  );
}

在上面的示例中，尽管我们调用了三次setNumber(number + 1)，但由于React的批处理机制，这三次更新会被合并，而且每次更新都是基于同一个number值，最终number只会增加1而不是3。

注意事项：

• 注意每次渲染的state值是固定的，多次调用setNumber(number + 1)会基于同一个number值。

修复后的代码：

function Counter() {
  const [number, setNumber] = useState(0);

  function handleIncrement() {
    // 使用函数式更新，每次都基于最新的state值
    setNumber(prevNumber => prevNumber + 1);
    setNumber(prevNumber => prevNumber + 1);
    setNumber(prevNumber => prevNumber + 1);
  }

  return (
    <>
      <h1>{number}</h1>
      <button onClick={handleIncrement}>+3</button>
    </>
  );
}

在修复后的示例中，我们使用了函数式更新，即setNumber(prevNumber => prevNumber + 1)。这样，每次更新都会基于上一次更新后的state值，确保了number最终会正确增加3。

命名惯例

为了代码的可读性，更新函数的参数通常以state变量的第一个字母命名。

技巧：

• 使用简短的参数名。

示例：

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);

注意事项：

• 保持命名的一致性，使代码更易于理解。

记住，合理地使用React的批处理机制和更新函数，可以大幅提升应用的响应速度和用户体验。

原文链接：https://juejin.cn/post/7341210148805574708 作者：辰火流光