React组件单次渲染改多次：点击按钮需触发10次渲染求助

React在事件处理函数这类同步执行的代码块中会启用批量更新机制，把多个状态变更合并成一次渲染来提升性能，所以你循环调用10次setcount只会触发一次组件渲染。

要实现每次状态更新都触发渲染，需要打破React的批量更新，让每个状态更新操作在独立的宏任务中执行。可以通过setTimeout来实现——setTimeout会将回调推入宏任务队列，脱离当前的批量更新上下文。

修改后的代码如下：

import { useState } from "react"

export default function Sample() {
  console.log("render")
  const [counter, setcount] = useState(0)
  
  const increment = () => {
    for (let i = 0; i < 5; i++) {
      // 用setTimeout包裹每次状态更新，打破批量更新
      setTimeout(() => {
        setcount(prevcount => prevcount + 1)
      }, 0)
      setTimeout(() => {
        setcount(prevcount => prevcount + 1)
      }, 0)
    }
  }
  
  return (
    <>
      <p>{counter}</p>
      <button onClick={increment}>increment</button>
    </>
  )
}

原理说明 #

• React的批量更新仅在同步执行的上下文（比如React事件回调、生命周期函数）中生效。
• setTimeout的回调会在当前同步代码执行完成后，作为独立的宏任务执行，此时React会为每个状态更新单独触发一次组件渲染。

内容的提问来源于stack exchange，提问作者prakash pappu