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 在性能、可维护性和用户体验方面都取得了显著的提升。

相关推荐
人工智能训练师12 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny0712 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy13 小时前
css的基本知识
前端·css
昔人'13 小时前
css `lh`单位
前端·css
前端君14 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61415 小时前
Web前端面试题(2)
前端
知识分享小能手15 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队16 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光16 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军16 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite