React 18 特性分析

1. 渲染模式 Concurrent

之前的Update是同步的不可中断的,React 18启用Concurrent模式,Update是异步可中断的

  • 可中断渲染:React 可以在渲染过程中中断当前任务,处理更高优先级的更新
  • 时间切片:将渲染工作分成小块,避免长时间阻塞主线程
  • 过渡更新:区分紧急更新和非紧急更新,优先处理用户交互等紧急任务

2. 自动批量处理

setState 是同步还是异步,原理是什么?

默认合成事件就是异步的,setState 放在 promise、setTimeout、原生事件中等为同步的。所谓的异步就是批量处理。之前的 React 批量更新依赖于合成事件,React 18 之后state的批量更新不再和合成事件有直接关系,而是自动批量处理。

3. React API

  • 三个基础Hooks: useState 、 useEffect 和 useContext;
  • 当需要优化性能,减少不必要的渲染时,使用 useMemo 和 useCallback ;
  • 当需要在大中型 React 项目中处理复杂 state 时,需要掌握 useReducer ;
  • 当需要封装组件,对外提供命令式接口时,需要掌握 useRef 加 useImperativeHandle;
  • 当页面上用户操作直接相关的紧急更新(Urgent Updates,如输入文字、点击、拖拽 等),受到异步渲染拖累而产生卡顿,需要优化时,需要掌握 useDeferredValue 和 useTransition 。
相关推荐
全栈前端老曹33 分钟前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
_Kayo_1 小时前
React上绑定全局方法
前端·javascript·react.js
梦6507 小时前
React + FullCalendar 实现高性能跨天事件日历组件
前端·react.js·前端框架
C_心欲无痕7 小时前
react - 组件之间的通信
前端·javascript·react.js
想学后端的前端工程师8 小时前
【React Hooks深度实战指南:从原理到最佳实践】
前端·react.js·前端框架
San30.10 小时前
从面向对象 CSS 到原子化架构:Tailwind CSS 与 React 性能优化实践
css·react.js·架构
IT古董10 小时前
企业级官网全栈(React·Next.js·Tailwind·Axios·Headless UI·RHF·i18n)实战教程-第五篇:登录态与权限控制
javascript·react.js·ui
未知原色1 天前
web worker使用总结(包含多个worker)
前端·javascript·react.js·架构·node.js
开发者小天1 天前
React中useMemo的使用
前端·javascript·react.js
im_AMBER1 天前
weather-app开发手记 04 AntDesign组件库使用解析 | 项目设计困惑
开发语言·前端·javascript·笔记·学习·react.js