这个Why we should ditch React谈话是必须观看的东西。克里斯·霍克斯(Chris Hawkes)是一位高级软件工程师,在《财富》 500强公司工作15年以上的经验。他已经对React进行了编码5年。他已经在Angular,Vue.js和所有较小的编码上编码(jQuery)。这是JavaScript历史的有趣年代。
强调
我很喜欢这个,我转录了它。这些主要是他的话,我的话混合了。
-
框架地狱 - 所有的框架和图书馆都试图完成同一件事,从JQuery On开始。
- 全球范围问题
- 从CSS规则渗透到其他元素中。因此,我们到处都将
!important
卡住,这是一个反模式。现在一切都是important
,您再次回到第一个问题。 - dom的更新有时会流血到您期望的其他元素中。
- 当6个不同的JS库同时进行DOM更新时,问题进一步加重了。我们几乎无法控制一个赢。
- 我的输入:您的所有代码现在耦合到该框架或库代码。
-
Web组件 - 解决全局范围(出血)问题。解决元素问题问题。
-
虚拟DOM
- 基于JavaScript的,在实际DOM面前的RAM内DOM层。队列更新,直到您致电.render()。性能提高。同样,虚拟DOM也很明智地防止NO-OP更新。它提供了势力。它不会发生更新元素,因为该元素已经按照您的指定。
- 我的输入:hefty。许多代码,转板器,新工具,新工作流程。在兄弟姐妹之间共享状态很棘手,等等。
fot Work&vue.js“ li> -
影子dom
- 浏览器中的本地。浏览器生产的本地解决了这些问题。阴影已经存在多年了,但是它们只是将其暴露于开发人员,因此开发人员有办法做到这一点。
- 不再需要像React这样的JS lib来做您的虚拟DOM。
- 浏览器本网络组件
- 我的输入:使用真实的DOM操纵。所有浏览器制造商都同意规格一个实施的时间会有时间。目前,所有主要的都支持传统边缘。最新的边缘是一个Chrome实例。
-
虚拟DOM
- 由于角失败而非常成功。
-
Angular - 由Google创建。
- Angular对反应正在做的事情做出了反应,并决定重写其完全的库。 2.0版将所有内容从1.0删除。这是不落后的。他们决定在当时使用新的和年轻的东西,打字稿。开发人员失去了理智。他们必须完全重写库,完全重新学习角,等等。
-
JSX / TSX < / strong> - 使用JS编写HTML。可以使用内联样式嵌入CSS。
- 对于许多开发人员来说,这是一个大问题。黄金法则是始终将您的JS与HTML和CS分开。
- 所有这些学习都必须完成。现在,我们必须使用所有这些工具来散发一切:webpack,babel等。
-
React - 巨大的封装。不再流血元素。小部件在其他系统中很容易重复使用。
- 我的输入:跨同胞元素沟通事件很棘手。您必须将其冒泡到根级状态,然后使用属性将其事件。
- 我的输入:太复杂了。您不知道要使用哪种用例。
-
我的输入:无法通过实验学习。
- 您必须参加100小时的Udemy课程,因为它是A:
- 专有框架具有非常有创造力的实施。
- 对我的几分钟,在我的上一份工作中学习了几分钟,因为这是常规的实施。 Coffeescript也是如此。几天生产
- 我的输入:没有自我。项目结构很快变得非常混乱,每个开发人员在代码库的不同部分中做根本不同的事情。您经常在1个回购中看到3或4个不同的实现。没有执行首先推出它的开发人员的实施。
-
通量架构解决了
- Facebook的方法
- 噩梦:建筑很烂。 Raelly做到了。我真的不喜欢这种经历。关于这个问题的许多开发人员线程。
-
redux - Redux承诺将在状态上更容易推理。
- 一家集中式商店。它是如何实现的?
- 同步。大问题
- 问题:如果您试图用承诺做任何事情,它会崩溃。如果您有一个使用承诺的Ajax,并且需要更新状态,则无法做到这一点。即使到今天,Redux都没有这样做。为了解决这个问题,他们提出了:
- ReduxFunc库。解决方案 / hack。还有一个叫做reduxsaga的人,还有所有这些废话。他的话。
- 近视的反应体系结构让位于所有其他hacky工具。
- devs bitched :这对所有这些不同的组件都无法彼此合作是太多的工作。编写这些基于类的组件的代码太多了。
-
通过创建功能组件做出反应。
- 每个人都必须抽出休息时间,找出功能性组件,重新考虑如何进行组件,并将所有内容重写为功能。”
- 您不使用功能组件,您是一个混蛋。
- 函数被除以基于侧面的(而不是替换),并根据用例串联使用。如果需要状态,请使用基于课程的。如果您不使用功能。
- 由于功能组件不是对象,因此您必须使用React Hooks来管理状态和生命周期事件。直到16.8版,钩子才引入React中,但它们有效地使类组件冗余。
- 将整个存储库移植到功能上的更多成本。
-
苗条
- 而不是您下载到浏览器中的反应库,而必须进行各种内部操作,处理和DOM扩散。所有这些逻辑以确定已更新的内容,从而最大程度地减少了更新。
- Svelte出现了,并说我们将提前完成所有工作。我们将提前将所有这些编译为JS。
- 较小的足迹。在客户端浏览器上更容易。
- 反应对敏捷反应
-
React钩子
- 以一种全新的方式编写func组件。
- 现在,开发人员必须完全重新考虑和重新学习他们使用反应的生命周期的方式。
- 您不使用React Hooks,您是一个混蛋。
- 更多重写等等。
- 本视频背后的重点是,也许我们应该放弃由于其短视体系结构而做出反应。
- 也许我们应该停止成为这些牛群的动物,从田野的一侧到另一侧。我们一直在圈子里走来走去。
- 灰烬,微光等。
- 我们不得不重写我们的体系结构。
- 本地HTML和CSS和JavaScript本质上是做大多数事情所做的。
- 使用Redux的大量公司,他们不知道为什么。
- 我们想知道为什么我们必须每年向开发人员支付14万美元。
- 当我们刚开始使用React组件时,它们不包含。因此,我们必须开始使用所有这些CSS LIB,这些CSS液体对该样式的组件进行了样式。无论是否在组件中,没有什么比一堆内联样式更糟糕的了。当然,与React有关,您可以集中CSS。即使我们有允许我们在组件之外编写CSS的工具,也需要解决各种新问题。 10年前,当我们试图解决Shadowdom的问题时。
- 该YT视频的评论者:Facebook从来没有打算用作react作为应用程序框架。他们创建了反应为“ MVC”变体中的“ V”,称为“ Flux”。由于某种原因,开发人员社区开始使用React作为独立框架,该框架引入了定义模型内部视图的问题,然后使用各种意大利面条代码使这些模型可访问其他视图(Props Drilling,Context Wrapper,Context Wrapper,地狱,地狱,地狱, ETC..)。集体思考确实令人着迷。
- 另一位评论者丹·莱文(Dan Levin):svelte是迄今为止唯一做对的人。我最近开始学习一项工作的反应,我对仅仅实施荣耀的全球变量而感到震惊。您能想象这个反应一直试图解决很长时间的问题甚至都不存在吗?一个实现全局变量的框架,每当您更改它时,所有组件都相应地更新。
- 框架地狱
- 解决这个混乱的解决方案!浏览器本地或极轻的组件。
解决方案:点亮,苗条或香草JS组件
-
Lit - 以前:
- Polymer-聚合物由Google创建,并点亮。
- 当聚合物第一次出来时,这是1.0之前的废话。它是如此之大,您必须使用所有这些多填充来支持它。现在好多了。
- 关于这个项目的最好的事情:的目标是不存在一天。最终消失,并被本地浏览器Shadow dom取代。
- 对于较旧的浏览器来说,这是一个没有完整阴影dom的旧浏览器,并抽象您的不同实现。
- 它类似于旧的html5 shim图书馆。它的目的是一旦浏览器抓住了。
也类似于我们今天可以写ES6的方式,而Babel和WebPack摘要通过将其移至Legacy JS来远离我们。当ES6浏览器支持足够宽时,您可能会失去Babel,Vite等。
结论
- 有更好的反应替代方案。
- 我们现在可以使用本机浏览器Web组件!
- 将来永远不必重写我们的组件。
- 当它们确实成为浏览器本地人时,请考虑一下(在RAM中)的光线和快速。您的代码和组件之间没有抽象的堆。
轻量级ðª¶JS框架是ð
-
Lit 图书馆很棒 - 以前为Polymer
- 不是不成熟。自2013年以来,聚合物一直在开发。
- Google针对小部件的“材料设计” Libs。我在我的React项目中使用了它们。
- 聚合物由许多AGOOGLE服务和网站使用,包括重新设计的YouTube,YouTube游戏,重新设计的Google Earth,Google I/O网站,Google Play音乐,Google Play Music,Google网站的重新设计和for Web的Allo。
- 使用它的一些非google cos:Netflix,Electronics Arts,Comcast,Nuxeo,ING,可口可乐,麦当劳,BBVA,IBM和General Electric。并不是说consony x使用的是采用任何理由。这只是我自己研究其合法性。
- Preact - 我的personal site建立在上面。
- Vanilla
- Slim
- Mithril