React基础 第十三章(State更新队列)

React中的批处理机制

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

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

技巧

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

示例

jsx 复制代码
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值。

修复后的代码

jsx 复制代码
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变量的第一个字母命名。

技巧

  • 使用简短的参数名。

示例

jsx 复制代码
setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);

注意事项

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

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

相关推荐
excel6 分钟前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着18 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名?
前端·后端·安全
会豪4 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js