3分钟说清React18重要新特性
date
Sep 14, 2023
slug
react_18_new_features
status
Published
tags
Website
前端
react
frontend
summary
快速介绍react18的新特性，包括rootAPI，setState自动批处理，并发模式等
type
Post
rootAPI
引入root API， 原来ReactDOM.render在更新的时候要传container，即使container没有改变，引入root算是一个小的优化。
render方法中还删除了回调函数，因为回调函数调用的时机很难把握。组件中通过useEffect来实现。
setState自动批处理
批处理是为了实现更好的性能，在数据层将多个状态更新批量处理，合并成一次更新，视图渲染也能一次渲染。setTimeout中不会被批处理，可通过组件中打印日志证明
flushsync
如果不想要批处理可以用flushsync
并发模式
优化渲染阻塞的问题，一旦渲染阻塞会让用户体验变的很差。优化的方案主要是同步不可中断更新变成异步可中断的更新。开启方式就是使用createRoot,
并发特性
开启了并发模式才能使用的特性
- useTransition: 将部分更新标记为过度来改善交互，标记的为不紧急渲染，这些资源可以被用来做其他事
- useDefferredValue: 让某个state的值延迟更新