(不可修改的引擎,React

(不可修改的引擎,react

世界上有很多游戏引擎:Unreal Engine、Unity Engine、Godot Engine、Cry Engine等等。

这些游戏引擎有什么共同点?可定制性。不同的游戏有不同的要求,需要特定的功能来实现其目标。在单个程序中提供所有可能的功能是很困难的,这就是为什么许多引擎允许开发人员修改源代码并构建自己的自定义功能的原因。定制是这些引擎的重要组成部分。

现在,让我们回到前端开发。 React 是该领域最流行的框架之一。但是,正如游戏开发中修改引擎很常见一样,前端开发中修改React内部源代码也同样常见吗?这个简单的问题揭示了我们真正追求的很多东西,并凸显了现代前端开发与其他领域之间的方向差异。

React 是一个几乎不可能修改的框架。我们鼓励您按原样使用 React,并且它不适合开发人员自定义其内部架构或渲染管道。因此,使用 React 意味着你必须在 React 结构的范围内解决你的所有需求。但世界充满了各种各样的需求,并不是所有的需求都可以在 React 的框架内得到解决。

“天下没有免费的午餐。”“没有任何工具可以完成所有事情。”

React 只是一种开发工具,它有其局限性。

开发人员使用 React 的主要原因是生产力。 React 是带着这样的问题创建的:“我们如何在 Web 开发中更有效地开发 DOM 组件?” React 方法的核心是 DOM。就像自动化功能通常意味着缺乏定制一样,他们谈论的“生产力”通常意味着“你无法通过虚拟 DOM 修改与浏览器紧密耦合的渲染循环。”

React 的第一个主要问题是 DOM。并非所有事物都围绕 DOM 展开,也并非每个程序都仅围绕 DOM 运行。然而,React 将 DOM 置于其哲学的核心。 JSX 语法中的每个组件都返回“类似 HTML 元素”的内容,清楚地反映了这种思维方式。

第二个问题是虚拟DOM。虚拟 DOM 的工作原理如下:

DOM 本质上很慢。为了缓解这个问题,React 引入了更快的内部逻辑。此逻辑创建一个复制实际 DOM 树形状的对象,称为虚拟 DOM。每当渲染发生时,React 都会使用此虚拟 DOM 查找更改,并仅更新这些部分。要实现这个系统,DOM 更新必须始终通过根 DOM 元素。虚拟 DOM 与 React 的内部操作无缝配合。

问题是,为什么 HPSE 首先要采用这样的系统?除了担心这种渲染方法无法满足各种 HPSE 要求之外,更大的担忧是它在这种情况下缺乏实际实用性。

在 HPSE 中,DOM 组件可以在类级别进行管理。创建实例时,其顶级 div DOM 引用将存储为成员变量。实例的私有方法可以直接操作 DOM 引用,也可以使用 querySelector() 来访问它。在大多数情况下,这比比较整个 DOM 树要快。

使用虚拟 DOM 只是识别更改的一种方法,但如果您已经将更改存储在实例内部,则再次搜索它们是多余的。一旦 DOM 元素更新,浏览器仍然会触发 ReFlow 和 RePaint,因此之后的性能没有差异。

最终的问题在于React的“内部操作”。这些内部操作到底是什么?缺乏详细的文档或信息,大多数前端开发人员也没有完全理解它们。浏览器客户端已经在浏览器本身的抽象层中运行,使其容易受到各种挑战。 React 不透明且不可修改的内部流程只会加剧此漏洞。

React 中组件的更改必须经过虚拟 DOM,而虚拟 DOM 由 Fiber 架构管理,遵循特定的优先级规则。然而,关于如何定制React内部函数以满足HPSE的实时性能或精确计时需求的文档却很少。感觉就像用无法定制的引擎开发 AAA 游戏。

“何苦呢?”

这是一个不断出现的问题。

React 内部耦合非常紧密,即使你想修改它也无法修改。它的设计从来没有考虑到这个目的。此外,渲染和状态更新的强耦合使得 React 不适合 HPSE 项目,在 HPSE 项目中,数据或 3D 元素等非可视组件必须与 DOM 元素一起管理。

在 HPSE 中,事件调用和内存卸载的时间可能与各个组件无关,但 React 强制执行这种基于组件的结构,这使得处理此类需求变得困难。 React 的设计中,组件中的状态变化会影响整个渲染树,这也与 HPSE 最小化或控制此类影响的需要相冲突。

React Three Fiber (R3F) 等库允许您使用“HTML Element Like”语法创建 Mesh 或 Scene 等实例,但这只是适应 React 结构的 Three.js。 React 中的高耦合度只会加剧内部不可修改的问题。

React 的事件处理方式也存在问题。 React 使用合成事件系统来确保浏览器兼容性和事件处理的一致性。然而,通过在事件处理中添加抽象层,该系统限制了 HPSE 所需的事件循环和时序的细粒度控制,从而难以实现必要的优化。

出现这些问题是因为 React 的设计理念与 HPSE 的目标根本不同。 React 构建时并没有考虑 HPSE;它旨在优化标准网络客户端的开发。如果 React 追求与 HPSE 类似的方向,那么它的功能将会有很大不同,并且有理由在 HPSE 开发中采用它。但由于目标如此不同,他们不可避免地分道扬镳。

这并不是说 React 的一切(例如路由或 useEffect)都不好。事实上,大多数这些功能都可以使用独立的 JavaScript 模块或代码来实现。与 React 不同,通用 JavaScript 模块不会在项目上强制执行特定的管道或规则。此外,如果它们是开源的,您可以修改其内部结构以满足您的需求。

以上就是(不可修改的引擎,React的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491964.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:25:16
下一篇 2025年12月19日 14:25:33

相关推荐

  • 探索 NFT 平台的发展和影响

    作为一名对区块链技术及其应用充满热情的开发人员,我最近在 NFT 领域开展了一个令人兴奋的项目。我的最新项目百慕大独角兽是一个综合性的 NFT 市场,旨在促进独特数字资产的创建、购买和销售。在这篇文章中,我想分享我的 NFT 网站的一个简短案例研究,以说明其开发过程及其对数字收藏品市场的影响。 案例…

    好文分享 2025年12月19日
    000
  • Nextjs 中间件简介:它如何工作并举例

    我们来谈谈nextjs中的路由。今天,我们来谈谈最强大的事物中间件之一。 nextjs 中的中间件提供了一种强大而灵活的方式来拦截来自服务器的请求并控制请求流(重定向、url 重写)并全局增强身份验证、标头、cookie 持久性等功能。 创建中间件 让我们创建 middleware next.js …

    2025年12月19日
    000
  • React 中的状态更新方法:性能

    在 react 中管理状态时,必须考虑两个关键点:性能和用户体验。 状态更新方法 更新状态时,可以使用以下方法: setcount(count + 1); 但是,虽然此方法可能看起来合适,但在异步更新期间访问先前的状态值时可能会导致问题。 2. 使用 prevstate 进行状态更新 如果新状态是根…

    2025年12月19日
    000
  • Analog 如何利用 Angular 彻底改变内容驱动网站

    多年来,许多开发人员在选择正确的框架来构建内容驱动的静态网站时都感到左右为难。虽然 Angular 因其强大的架构而一直受到青睐,但它缺乏有效创建此类网站的必要功能。 Analog 是一个改变了游戏规则的 Angular 元框架。本文将探讨 Analog 带来的好处,特别是对于那些希望创建内容驱动网…

    2025年12月19日
    000
  • 揭示算法和数据结构:高效编程的基础

    在这一系列文章中,我将分享我的学习历程,涉及在学术环境和大型科技公司中广泛讨论的两个主题:算法和数据结构。虽然这些主题乍一看似乎令人畏惧,特别是对于像我这样由于其他职业挑战而在整个职业生涯中没有机会深入研究这些主题的人,但我的目标是让它们变得容易理解。 我将从最基本的概念开始,然后转向更高级的主题,…

    2025年12月19日
    000
  • 你需要了解的 JavaScript 特性

    在本文中,我们将探讨如何在尝试访问可能未定义或 null 的数据时防止错误,并且我们将研究在必要时可用于有效管理数据的方法。 通过可选链接进行安全访问 在 javascript 中,当尝试访问嵌套对象中的值或函数时,如果结果为 undefined,您的代码可能会抛出错误。此错误可能会停止代码的执行。…

    2025年12月19日
    000
  • SQL 中的键 |主键 |外键|候选键|复合键|备用键|超级键|代理键|独特的钥匙

    在 SQL 中,键用于唯一标识表中的行、加强表之间的关系并维护数据完整性。钥匙有不同类型,每种都有特定的用途。以下是各种按键的详细说明和简单示例: 主键 主键唯一标识表中的每条记录。不能有NULL值,每个表只能有一个主键。 示例: 创建学生表( StudentID INT PRIMARY KEY, …

    2025年12月19日
    000
  • Vuejs 中计算属性的基础知识:组合 API

    计算属性 让我们考虑一个响应式对象: const author = reactive({ name: ‘john doe’, books: [ ‘vue 2 – advanced guide’, ‘vue 3 – basic guide’, ‘vue 4 – the mystery’ ]}) 在此对…

    2025年12月19日
    000
  • 关于 UUID 您需要了解的一切

    通用唯一标识符 (uuid) 是计算机系统中用于唯一标识信息的 128 位标签。 uuid 被设计为在空间和时间上都是唯一的,允许它们在没有中央权威的情况下独立生成,从而最大限度地减少重复的风险。 uuid 有多种用途,包括: 识别数据库中的记录。标记分布式系统中的对象。在唯一性至关重要的应用程序中…

    2025年12月19日
    000
  • 使用 Nodejs 构建实时仪表板

    介绍 在当今快节奏的商业世界中,组织访问实时数据以做出明智的决策至关重要。这就是使用 node.js 构建实时仪表板发挥作用的地方。 node.js 是一种流行的、轻量级的、高效的 javascript 运行时环境,近年来获得了极大的普及。在本文中,我们将讨论专门使用 node.js 构建实时仪表板…

    2025年12月19日
    000
  • 为什么每个网站都应该使用 HTTPS

    在当今的数字时代,在线安全对于任何网站都至关重要,无论是个人博客还是电子商务平台。保护站点安全的一个关键步骤是实施 HTTPS,这是 HTTP 的安全版本,它对浏览器和服务器之间交换的数据进行加密。 什么是 HTTPS? HTTPS(安全超文本传输​​协议)使用 SSL/TLS 加密数据,确保密码、…

    2025年12月19日
    000
  • 如何在Chrome中使用AI实验API

    要在 chrome 中使用实验性 ai api,请按照以下步骤操作: 硬件要求 4gb 内存gpu 可用至少 22gb 空间windows 10.11 或 macos ventura 或更新版本(无 linux 规范) 尚不支持: chrome操作系统chrome ioschrome 安卓 软件要求…

    2025年12月19日
    000
  • 在 Electron 中创建主进程和渲染进程之间的同步存储

    查看我们关于在 Electron 中的主进程和渲染器进程之间创建同步存储的最新博客。 使用 Electron 构建桌面应用程序时,一个常见的挑战是管理处理核心逻辑的主进程和负责 UI 的多个渲染器进程之间的共享状态。这些进程通常需要同步访问用户首选项或应用程序状态等数据。 由于 Electron 本…

    2025年12月19日
    000
  • Angular 和 15 的改进

    1) 在 angular 14 中注入服务,无需使用注入构造函数。以前,注入任何服务总是需要具有构造函数的类: class myclass { constructor(private myservice: myservice) {}} 现在,我们可以在函数和类中注入服务。我们只需要声明一个变量并将其…

    2025年12月19日
    000
  • 列表中与 map、forEach 和其他方法的交互

    当我们使用现代编程语言处理列表时,通常会找到几种方法来迭代其元素并对它们执行操作。最流行的结构包括 map、foreach、filter 和其他方法。这些方法对于任何想要编写更简洁、高效和可读的代码的人来说都是必不可少的。让我们来探讨一下这些方法、它们的区别、优点以及如何正确使用它们。 1.fore…

    2025年12月19日
    000
  • 每个开发人员都应该了解的核心 React 概念

    掌握 react:关键概念综合指南 react 彻底改变了我们构建用户界面的方式。本指南将引导您了解基本的 react 概念,帮助您了解如何创建动态、高效且可维护的应用程序。 jsx 和动​​态值react 的核心优势之一是 jsx,它允许您在标记中使用动态 javascript 值。您可以使用花括…

    2025年12月19日
    000
  • 解锁性能:了解总阻塞时间 (TBT)

    在 Web 开发领域,优化网站性能是提供无缝用户体验的关键因素。总阻塞时间 (TBT) 是一个重要的 Web 性能指标,用于量化页面加载过程中交互延迟的程度。在本文中,我们将深入探讨 TBT 的概念,探讨其在衡量用户体验方面的重要性,并讨论改进它的有效策略,从而打造更快、响应更快的网站。 了解总阻塞…

    2025年12月19日
    000
  • 理解 Reactmemo:优化功能组件

    react.memo 是 react 中使用的高阶组件,通过防止功能组件不必要的重新渲染来优化性能。它的工作原理是记住组件的结果,并且仅在其 props 发生变化时重新渲染它。这对于在给定相同 props 的情况下呈现相同输出的功能组件的性能优化非常有用。 用法示例: import react fr…

    2025年12月19日
    000
  • 理解 React 中的关键属性

    在 react 中使用列表时,最关键的概念之一是 key 属性。键在 react 如何管理列表更新方面发挥着重要作用。在本文中,我们将探讨按键的重要性、如何有效使用它们以及要避免的常见错误。 react 中的键是什么? 在 react 中,键是分配给列表中元素的唯一标识符。这些键帮助 react 确…

    2025年12月19日
    000
  • 为什么 Ky 是现代 HTTP 请求的 Axios 和 Fetch 的最佳替代品

    在 javascript 中处理 http 请求时,axios 和 fetch 长期以来一直是首选工具。然而,开发者应该考虑一个强大的、现代的替代方案 — ky。 ky 轻量级且具有高级功能,使处理 http 请求变得更容易、更高效。在本文中,我们将通过与 axios 和 fetch api 的直接…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信