【React】18版本新增特性解析

新增特性使用
并发渲染(Concurrent Mode)

定义:之前版本中,渲染是同步的,更新DOM时,无法处理其他任务,现在,允许react可以在浏览器空闲时逐步更新DOM,即使在渲染期间,浏览器也可以继续处理优先级更高的渲染任务

优势:提高应用性能:可中断渲染,避免长时间阻塞主线程,保持响应

           更好的用户交互:不影响用户交互的情况下,准备新的UI

           更灵活的更新优先级:设置更新优先级,确保重要的更新尽快展示

开启方式:ReactDOM.render改为ReactDOM.createRoot();

自动批处理

(Automatic Batching)

定义:将多个状态更新组合到一次重新渲染

优势:减少渲染次数:多个状态合并到一次渲染,提高性能

          一致性:确保状态更新的行为在不同场景下保持一致

          简化代码:不需要手动优化批处理

Transitions

定义:是否紧急更新,将某些更新标记为“可中断”

优势:提高用户体验:保持响应,即使在处理大量更新时,也可被中断

           优化性能: 通过优先级处理紧急更新,提高应用的整体性能

           更好的加载状态管理:提供了更细粒度的加载状态控制

使用:useTransition、startTransition

Suspense

定义:简化异步数据获取的处理,组件挂载时延迟加载所需资源,同时显示加载指示器

优势:与并发渲染集成

          允许逐步向客户端发送HTML,提高首次加载性能

          可以在服务端使用

客户端API

ReactDOM.createRoot():用于创建并发模式的根节点

root.render:替代了ReactDOM.render(),用于渲染应用

服务端API

renderToPipeableStream():用于流式SSR,提高首屏加载速度

renderToReadableStream():用于Web Streams API

useId生成唯一ID,适用于可访问性属性
useTransition标记非紧急更新
useDeferredValue

允许延迟更新不太重要的部分

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值