client中的createRoot取代以前的ReactDOM.render

client中的createRoot取代以前的ReactDOM.render

以前root只存在于React内部，现在用户也可以复用root了。

const root = createRoot(document.getElementById("root"));

root.render(jsx);

自动批量处理 Automatic Batching / setState是同步还是异步

可同步可异步。

在React18以前，可以把setState放在promises、setTimeout或者原生事件中实现同步。

而所谓异步就是个批量处理，为什么要批量处理呢。举个例子，老人以打渔为生，难道要每打到一条沙丁鱼就下船去集市上卖掉吗，那跑来跑去的成本太高了，卖鱼的钱都不够路费的。所以老人都是打到鱼之后先放到船舱，一段

时间之后再跑一次集市，批量卖掉那些鱼。对于React来说，也是这样，state攒够了再一起更新。

但是以前的React的批量更新是依赖于合成事件的，到了React18之后，state的批量更新不再与合成事件有直接关系，而是自动批量处理。

// 以前: 这里的两次setState并没有批量处理，React会render两次 setTimeout(() => {

setCount(c => c + 1);

setFlag(f => !f);

}, 1000);

// React18: 自动批量处理，这里只会render一次 setTimeout(() => {

setCount(c => c + 1);

setFlag(f => !f);

}, 1000);

所以如果你项目中还在用setTimeout之列的“黑科技”实现setState的同步的话，升级React18之前，记得改一下~

虽然建议setState批量处理，但是如果你有一些其它理由或者需要应急，想要同步setState，这个时候可以使用flushSync，下面的例子中，log的count将会和button上的count同步:

// import { flushSync } from "react-dom";

changeCount = () => { const { count } = this.state;

flushSync(() => { this.setState({

count: count + 1, });

});