React 15~18每个阶段更新了什么

React 15

React.createClass (弃用)
class 组件
函数组件(无状态、纯UI组件)
堆栈diff(同步更新state1->state2->state3…、每个更新过程不可中断

每个更新过程包括:

  1. setState
  2. 创建虚拟dom节点
  3. 虚拟dom对比完成,创建真实dom节点

React 16

hooks:让函数式组件有了和类组件一样的状态(副作用函数可以模拟生命周期)
React fiber:取代堆栈diff,可中断更新机制

  • 基于浏览器单线程调度算法:原生js的requestIdleCallback(在浏览器空闲的时候执行)

requestAnimationFrame:在浏览器执行重排重绘渲染前面调用,使用场景:把动画、更新dom的操作放入raf的回调函数中,性能较好。

  • 如果这一帧16.6ms执行完,还剩余一点时间,RIC 会被执行。

小结

  • RIC 执行时机:宏任务、微任务、raf、渲染完成之后执行。
    • 在callback中执行一些轻量的微任务。(存在任务优先级)

React fiber 分为两个阶段:

  1. 协调阶段:创建vdom过程中,打断低优先级,执行高优先级的任务。(∴ 伴随新生命周期的出现,老生命周期可能会重复执行两次。)
  • React意识到componentWillMount、componentWillReceiveProps和componentWillUpdate这三个生命周期函数有缺陷,比较容易导致崩溃。但是由于旧的项目已经在用以及有些老开发者习惯用这些生命周期函数,于是通过给它加**UNSAFE_**来提醒用它的人要注意它们的缺陷。
  • 替换方案:React 16.3 加入了两个新的生命周期函数getSnapshotBeforeUpdate和getDerivedStateFromProps。
  • 17.0:删除componentWillMount,componentWillReceiveProps 和 componentWillUpdate。 (从现在开始,只有新的“UNSAFE_”生命周期名称将起作用。)
  1. 提交阶段:提交真实dom,不允许被打断。

React 17 试验性并发模式

交替执行不同的任务

React 18

concurrent mode 并发模式,不是一个具体功能,是一个底层设计。
基于并发模式,18 给出两个API,让开发者自己决定优先级的高低。
底层如何实现:基于fiber架构,requestIdleCallback 空闲函数来实现。

  1. 使用ReactDOM.createRoot( ) 默认开启批处理功能并发模式
  2. 使用 useTransition()、useDeferredValue() 指定非紧急任务更新。

二者区别:

  • 相同:本质上内部实现一样,都是标记成了延迟更新任务。
  • 不同:useTransition 是把更新任务变成了延迟更新任务,而useDeferredValue把一个状态变成延迟的状态
  1. 自动批量更新State
    支持批处理:
  • React 事件处理函数
  • promise
  • setTimeout
  • 原生事件处理
    flushSync:按照串联的方式进行更新。如果不用flushSync,就变成批处理。
  1. 严格模式

  2. Suspense 组件的变化

  3. 其他更新

相关推荐

  1. React 15~18每个阶段更新什么

    2024-04-27 11:04:06       37 阅读
  2. react中render阶段什么

    2024-04-27 11:04:06       54 阅读
  3. React Hooks解决什么问题?

    2024-04-27 11:04:06       60 阅读
  4. react-native 渲染引擎经历什么

    2024-04-27 11:04:06       28 阅读
  5. react 对Fiber架构的理解?解决什么问题?

    2024-04-27 11:04:06       45 阅读
  6. React-Fiber的理解,它解决什么问题?

    2024-04-27 11:04:06       37 阅读
  7. 什么阶段什么

    2024-04-27 11:04:06       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-27 11:04:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-27 11:04:06       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-27 11:04:06       82 阅读
  4. Python语言-面向对象

    2024-04-27 11:04:06       91 阅读

热门阅读

  1. 并查集(Union-Find)

    2024-04-27 11:04:06       36 阅读
  2. 前端面试(争取日更版)(一)

    2024-04-27 11:04:06       39 阅读
  3. 边缘计算概述_1.边缘计算概念和定义

    2024-04-27 11:04:06       33 阅读
  4. CPP语法(六)——函数模板

    2024-04-27 11:04:06       35 阅读
  5. android11 加入GMS后修改launcher图标顺序

    2024-04-27 11:04:06       32 阅读
  6. 用asio::tcp通信的服务端

    2024-04-27 11:04:06       33 阅读
  7. MATLAB初学者入门(20)—— 预编码算法

    2024-04-27 11:04:06       34 阅读
  8. Python常见数据结构

    2024-04-27 11:04:06       36 阅读
  9. 编写一款2D CAD/CAM软件(十八)框选图形

    2024-04-27 11:04:06       30 阅读