编译器一直运行吗,没有编译器程序能执行吗

首页 > 实用技巧 > 作者:YD1662023-05-29 22:40:17

但是 Svelte 的维护者声称 vDOM 是完全没有必要的——那为什么要浪费这些资源呢?

7.3 vDOM 的*手级特性

vDOM 有一个*手级功能,Svelte 无法替代,即将组件层次结构视为对象的能力。比如下面的 React 代码:

const UnorderedList = ({children}) => ( <ul> { children.map((child, i) => <li key={i}>{child}</li> } </ul> ) const App = () => ( <UnorderedList> <a href="http://example.com">Example</a> <span>Example</span> Text </UnorderedList> );

这个任务对 React 来说小菜一碟,但对 Svelte 来说难于登天。因为模板不是图灵完备(Turing-complete)的,如果是,那它们就得需要虚拟 DOM。看起来似乎问题不大,但对我来说,已经是一个足够正当的理由去给应用额外增加 0.15 秒到 0.25 秒的响应时间了。这正是我们需要虚拟 DOM 之处 —— 我们可能不需要用它来进行响应式的状态更新、条件渲染或者列表渲染,但只要我们有了它,我们就能把组件层级作为完全动态的、可控的对象来处理。没有这个功能,你不可能写出一个真正的声明式应用。

8.暂时性限制(将来可能会修复)

以下是一些不使用 Svelte 的额外原因,这些原因可能会得到修复。但这将需要大量的社区努力,只要成本超过收益,这一切就不会发生。

8.1 不支持 TypeScript

因为 Svelte 使用模板,所以很难通过在 React 中享受的 props 检查来实现完整的 TypeScript 支持。 这需要对 Microsoft TypeScript 实现进行重大更改(这不太可能发生,因为 Svelte 的影响力远不及 React),或者某种需要持续维护的分支。 代码生成也是个可选方案,但对元素层级中的每个细微的改变都运行一次代码生成器,是个可怕的开发体验。

8.2 不成熟(Immaturity)

考虑互用性。想要用 npm 安装炫酷的日历工具并用在自己的应用中?在以前,只有你用的是(一个确定版本的)该工具适配的框架才行。比如 cool-calendar-widget 是用 React 开发的,而你在用 Angular,那么好吧,无法使用。但如果该工具的作者用了 Svelte 开发,那么你可以随意用哪种框架开发要使用该工具的应用。—— Rich Harris,Svelte 的维护者

目前已经拥有了我能想到的用于 React 的任何工具,比如十几个 GraphQL 客户端、超过 30 个表单状态管理器、数百个 DateTime 输入。

编译器一直运行吗,没有编译器程序能执行吗(9)

9.光明的未来?

尽管存在上述限制,但我认为 Svelte 实际上提出了一个非常宝贵的想法。即,无法在不牺牲灵活性和代码可重用性的情况下通过模板完全表达现代应用程序,但应用程序所做的绝大多数事情只是条件渲染和列表渲染。 同理,如果只使用 onChange={e => setState(e.target.value)} 并在我的组件中渲染一系列 <div>,为什么我需要支持键盘事件、滚轮事件和 内容编辑 ?

老实说,我不相信 Svelte 目前的形式可以战胜 React 并征服世界。 但如果有一个框架,它没有任何特定的限制,却能 100% 摒弃所有无用的部分,那就太酷了。要是能生成一些在运行时可用的、有关其正确执行的构建提示,那就更棒了。

10.可读性如何?

我们知道 Svelte 的关键特性不是性能(好处可以忽略不计),也不是魔法(有一些警告对于 JavaScript 来说非常不自然,你很难理解它们, 同时缺乏开发工具支持)、 更不是互操作性(放在 2014 年可能还算个角色,但如今 React-NG-Vue 三大框架下已经应有尽有了),那么但是可读性如何呢?

根据我的经验,一个 React 组件通常比它的 Svelte 组件大 40% 左右,差异如此明显是不寻常的!

您只需编写每段代码一次、然后多次读取,这是编码的个人喜好问题,也是个颇有争议的话题。我发现 JSX 和常规 Javascript 流运算符比任何类型的 {#blocks} 和指令都更具可读性。 在 Vue 大红大紫的时候,我曾经是它的忠实粉丝。 后来我逐渐发现模板的局限性,比如缺乏表现力,并开始切到 JSX —— 因为 JSX 和 Vue 不是一个风格,后来就转向了 React,但是这次我还不想那么快转移到 Svelte 上。

参考资料

https://svelte.dev/

https://github.com/sveltejs/rfcs/blob/master/text/0001-reactive-assignments.md

https://svelte.dev/blog/virtual-dom-is-pure-overhead

https://en.wikiquote.org/wiki/Donald_Knuth

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

https://svelte.dev/blog/virtual-dom-is-pure-overhead

https://svelte.dev/blog/frameworks-without-the-framework

https://svelte.dev/blog/write-less-code

上一页123末页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.