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的批处理机制和更新函数,可以大幅提升应用的响应速度和用户体验。

相关推荐
杨进军14 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW29 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字35 分钟前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵1 小时前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im1 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript