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 。
相关推荐
We་ct43 分钟前
React 中的双缓存 Fiber 树机制
前端·react.js·缓存·前端框架·reactjs·fiber·缓存机制
We་ct1 小时前
React Render 与 Commit 阶段详解
前端·react.js·面试·前端框架·react·commit·render
英俊潇洒美少年1 小时前
React Hook 钩子 useInsertionEffect、useLayoutEffect、useEffect的区别
前端·javascript·react.js
大雷神1 小时前
HarmonyOS APP<玩转React>开源教程七:HarmonyOS 数据存储方案
react.js·开源·harmonyos
Highcharts.js11 小时前
Highcharts React v4.2.1 正式发布:更自然的React开发体验,更清晰的数据处理
linux·运维·javascript·ubuntu·react.js·数据可视化·highcharts
sxq15 小时前
Flow Render: 像调用异步函数一样渲染 UI 组件
vue.js·react.js
Sgf22716 小时前
如何阅读 React 源码:系统化学习指南
前端·react.js·前端框架
sure28217 小时前
React Native中自定义TabBar
前端·react native·react.js
局i19 小时前
React 简单地图组件封装:基于高德地图 API 的实践(附源码)
前端·javascript·react.js
张一凡9321 小时前
easy-model 实战:跨组件通信、监听与异步加载,一库搞定 React 状态难题
前端·react.js