React18 新特性

React18提供了全新的创建根节点的方式： ReactDOM.createRoot()，用这个创建根节点可以开启React18的全新特性。如Concurrent模式等。 那么React18到底带来了哪些新的功能呢？我们一起来看一下。

Concurrent Rendering（并行渲染）

时间切片：在并行渲染的模式下，当更新任务无法在一帧之内完成时，任务会被切割为多个任务进行可中断的更新，以此来保证没帧都有多余的时间来进行渲染

更新优先级： 更新的任务会有优先级，更高优先级的任务会打断当前执行的任务先进行处理，处理之后再恢复执行原来的任务。

startTransition & useTransition

设想一个长列表搜索的场景，当用户输入搜索时，需要按照条件渲染出长列表，这就会造成卡顿。 实际上这里有两次渲染，即输入框的渲染和列表的渲染。常规的解决办法是利用debounce防抖。 React现在提供了一个内置的方法，可以更好的处理这种问题

用startTransition包裹执行的任务会被标记为不紧急渲染，因此会被其他紧急的任务抢占先机

startTransition(()=> {
    setList(input);
})

useTransition和startTransition的功能一样，使用方法

const [pending, transition] = useTransition();
transition(()=> {
    setList(input)
})
//pending用来处理渲染状态时的显示

{ 
  pending?<h2>loading....</h2>:(
    arr.map((item,key)=>(
        <div key={key}>{item}</div>
    ))
  )
}

setState合并更新

在react18之前，setState是合并更新，在setTimeOut中是按同步顺序更新的

在react18之后，所有的setState都是合并更新的了

setState的队列

正常情况下我们在setState中传入的是state的值，但当我们传入的是方法的时候React就会按照队列的方式执行

const [number, setNumber] = useState(0)
setNumber(n+1)
setNumber(n+1)
setNumber(n+1)
// 返回1
setNumber(n=>n+1)
setNumber(n=>n+1)
setNumber(n=>n+1)
// 返回3

这里的原则就是传入的是方法就会被添加到队列中去执行，而传入的是值就会替换原来的值

suspense

suspense用于在组件渲染之前的等待期间显示Suspense的callback内容， suspense内的组件优先级会比其他组件的优先级更低