首页 > 试题广场 >

在 React 18 环境下，考虑以下组件。当用户点击按钮时

[单选题]

在 React 18 环境下，考虑以下组件。当用户点击按钮时，`handleClick` 函数被触发。请问该组件会重新渲染多少次，以及最终显示的 `count` 值是多少？

function BatchingTest() {
  const [count, setCount] = useState(0);
  console.log('Render');
  const handleClick = () => {
    setCount(c => c + 1);
    setCount(c => c + 1);
  };
  return <button onClick={handleClick}>Count is {count}</button>;
}

```
重新渲染 2 次，最终 count 为 2
```
```
重新渲染 1 次，最终 count 为 1
```
```
重新渲染 1 次，最终 count 为 2
```
```
重新渲染 2 次，最终 count 为 1
```

查看答案及解析

__sgf__

在 React 18 之前，React 只会在自己的合成事件（比如 onClick、onChange 等React事件）里做批处理，也就是把同一轮事件里的多个 setState 合并成一次重新渲染；但如果是在异步代码里，比如 setTimeout 、Promise 的 then/catch、原生事件、fetch 请求回调中执行多个 setState ，React 就不会自动合并，每调用一次 setState 都会触发一次独立的组件重渲染，会造成多余渲染、性能变差。而 React 18 的自动批处理打破了这个限制，不管是同步还是异步、不管是React事件还是普通异步代码里的多次状态更新，都会自动合并为一次重渲染，不再需要开发者手动处理批处理。

发表于今天 06:34:19 回复(0)