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 。
相关推荐
A923A20 分钟前
【从零开始学 React | 第四章】useEffect和自定义Hook
前端·react.js·fetch·useeffect
LIO34 分钟前
React 零基础入门,一篇搞懂核心用法(适合新手)
前端·react.js
百撕可乐2 小时前
WenDoraAi官网NextJS实战03:项目插件与Header组件
react.js·js
英俊潇洒美少年2 小时前
Vue Hook 与 React Hook 全面解析:区别、用法、实战及避坑指南
前端·vue.js·react.js
PD我是你的真爱粉3 小时前
AI Agent 完全指南:LangChain Agent、ReAct、Copilot-Agent 模式、Manus、Computer Use 与记忆机制
人工智能·react.js·langchain
英俊潇洒美少年3 小时前
Vue3 实现 AI 流式打字机(SSE+时间切片模拟 React 并发)工程化完整版
前端·人工智能·react.js
光影少年3 小时前
Android和iOS原生开发的基础知识对RN开发的重要性,RN打包发布时原生端需要做哪些配置?
android·前端·react native·react.js·ios
英俊潇洒美少年3 小时前
迷你 React 调度器(带优先级+时间切片)手写实现
前端·javascript·react.js
百撕可乐3 小时前
WenDoraAi官网NextJS实战04:HTTP 请求封装与SSR
前端·网络·网络协议·react.js·http