react15与react16的本质区别

React 15 和 React 16 在架构和一些核心特性上存在本质性的区别。

1.Reconciliation(协调)算法:

  • React 15: React 15 使用了递归的协调算法,即采用深度优先遍历整个组件树来协调更新。这种方式在处理大型组件树或深度嵌套组件时可能导致性能问题。
  • React 16: React 16 引入了 Fiber 架构,使用了一种更灵活的协调算法。Fiber 架构的核心思想是将协调过程拆分成可中断的小任务单元,允许在渲染过程中中断和恢复,以更好地响应用户输入,提高性能。

React Fiber 架构:

  • React Fiber 架构是 React 16 引入的一种新的协调引擎,它重新设计了 React 的核心算法,提供了更灵活的调度和渲染机制。Fiber 架构的目标是改善 React 在大型应用中的性能,同时提供更好的用户体验和交互响应性。
  • 以下是 React Fiber 架构的一些关键特性和概念:
    1. Fiber 节点:在 Fiber 架构中,每个 React 元素都对应一个 Fiber 节点。Fiber 节点是一个轻量的 JavaScript 对象,用于描述 React 元素的信息,例如元素的类型、属性、子元素等。
    1. 协调:Fiber 架构引入了新的协调机制,通过协调器(Reconciler)来处理元素的更新和渲染。协调器使用一种深度优先遍历的算法来协调和调度 Fiber 节点,使得 React 能够更加灵活地处理更新和渲染的优先级。
    1. Fiber 树:Fiber 架构中的元素被组织成一个 Fiber 树。与传统的递归调度不同,Fiber 树的节点可以在不同时间点暂停、中断和恢复。这使得 React 能够在渲染时对任务进行切片,提高对用户输入的响应速度。
    1. 时间片(Time Slicing):Fiber 架构引入了时间片的概念,将任务切分成小的时间片单元。这使得浏览器能够在每个时间片之间进行中断,执行其他任务,提高页面的交互响应性。
    1. 异步渲染: Fiber 架构支持异步渲染,可以将渲染工作分散到多个帧中,避免一次性渲染大量元素导致的卡顿。异步渲染使得 React 能够更好地适应复杂的应用场景,提高了整体的性能。
    1. 优先级调度: Fiber 架构引入了优先级调度的概念,通过任务的优先级来决定任务的执行顺序。这允许 React 在处理高优先级任务时能够更快地响应用户输入,同时在处理低优先级任务时避免阻塞主线程。
    1. 增量渲染:Fiber 架构支持增量渲染,可以在每个时间片中只更新发生变化的部分,而不是整体重新渲染。这减少了不必要的计算和 DOM 操作,提高了渲染的效率。
  • 总的来说,React Fiber 架构是为了解决在大型应用中渲染性能和用户体验问题而引入的。它通过重新设计协调机制、引入时间片和优先级调度等特性,使得 React 能够更加灵活地处理复杂的更新和渲染任务,提高了整体的性能和响应速度。

时间片:

时间片(Time Slicing)是 React 16 引入的一项特性,旨在提高应用在处理大型任务时的性能和用户体验。时间片将任务分割成小块,使得浏览器能够在每个时间片之间进行中断,从而更好地响应用户输入和保持页面的流畅性。

时间片的主要目标是解决两个问题:

  1. 用户交互响应性:在进行大型渲染任务时,如果一直占用主线程,可能会导致页面在渲染完成之前无法响应用户的输入,造成页面卡顿和交互迟滞。

  2. 动画和滚动卡顿:当页面中有大量的 DOM 元素需要渲染时,如果一次性渲染所有元素,可能导致动画和滚动的卡顿,影响用户体验。

时间片通过将任务切分成小的时间片单元,允许浏览器在每个时间片之间进行中断,执行其他任务,如处理用户输入或执行高优先级的代码。这样,即使有大型任务在进行,浏览器也能够更及时地响应用户的输入和保持页面的流畅性。

时间片的作用包括:

  1. 更好的用户体验:通过将渲染任务分解成小块,可以更好地响应用户输入,提高页面的交互响应性。

  2. 减轻主线程压力: 时间片允许浏览器在每个时间片之间进行中断,执行其他任务,减轻了主线程的压力,提高了页面的性能。

  3. 避免卡顿:在动画和滚动等场景下,时间片的引入可以避免一次性渲染大量元素导致的卡顿问题,提高了流畅度。

那是不是就说明react15是单线程,react16是多线程的呢?

不是:

React 15 及之前的版本是单线程的,它使用了浏览器的事件循环(event loop)来处理用户交互和更新渲染。在 React 15 中,更新是通过递归方式同步执行的,一旦开始更新,就会一直递归遍历组件树,直到所有组件都完成渲染。这样的机制可能会导致在更新较大的组件树时,主线程被长时间占用,造成页面卡顿。

React 16 及 React 17 引入了 Scheduler 模块和异步渲染的概念,但仍然是在主线程上执行的。这并不是说 React 变成了多线程框架,而是通过优先级调度和异步渲染的方式,更好地利用了主线程的时间片,提高了对用户交互的响应速度,减少了卡顿的可能性。

2.React Fiber 架构:

  • React 15: 使用了递归更新的方式,可能在大型应用或复杂更新场景下性能受限。
  • React 16: 引入了 Fiber 架构,提供了更灵活的调度和渲染机制,支持时间片切割、异步渲染、增量渲染等特性,以提高性能和用户体验。

3.React Portals:

  • React 15: 不支持 React Portals,这是 React 16 引入的一项新特性,允许将子组件渲染到 DOM 结构中的不同位置。
  • React 16: 引入了 createPortal API,使得开发者可以在组件树之外渲染子组件,从而更灵活地管理组件的渲染位置。

这些改进使得 React 在性能、可维护性和用户体验方面都取得了显著的提升。

相关推荐
如若12315 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript