在 Velo 中反应
在 Velo 中反应
Spartans a.k.a Developer Platform Innovation Team
我们是斯巴达人，Wix 的一个团队，我们的目标是研究想法/问题并创建解决方案或概念证明。今天，我想和大家分享一个这样的项目的故事，但首先要介绍一下背景。
维洛 通过 Wix 让用户能够编写代码来增强您的 Wix 网站的功能。
与页面及其元素交互的 Velo 代码具有类似于 JQuery 的语法，如下所示：
Example from Shahar’s post
上面的代码有一些问题。在他的文章中 velo 中的状态管理 , Shahar 详细讨论并提出了一些出色的解决方案。但我们能走得更远吗？我们能否为用户提供更加熟悉的环境？
React 是迄今为止最流行的前端框架
来自 StackOverflow 的年度开发者调查：
Node.js 和 React.js 是专业开发人员和学习编码人员最常用的两种 Web 技术。
React 有 44% 的市场份额，jQuery 只有 29%，所以下面的代码对于 2022 年的开发者来说应该比上面的代码更熟悉：
您今天实际上可以访问您的 Wix 站点，从 npm 安装 反应 和 @wix/react-velo，
将这 3 个元素拖到舞台上：
- 带有 id 的文本：计数器
- 带有 id 的按钮：增量
- 带有 id 的按钮：递减
并测试上面的代码，它应该可以正常工作™。你可以看到 住在这里 .
没有魔法
Meme
要真正完成这项工作，无需对 Velo 或其 API 进行任何更改。一切都是从“外部”库——react-velo 完成的。
react-velo 实际上是一个 React 调和器 ，应用内部反应状态的组件（想想 虚拟 DOM ) 到 UI，最常见的例子是 反应 DOM .
其他反应调节器的示例：
作为协调者，需要实现诸如（ 完整的 API 在这里 ):
appendChild?(parentInstance: Instance, child: Instance | TextInstance): void; removeChild?(parentInstance: Instance, child: Instance | TextInstance | SuspenseInstance): void;
当需要更改实际的“DOM”时，React 将调用这些方法。但是，在 Velo 中，我们实际上无法访问真正的 DOM，我们只有 $w。
另一个限制是，在文档上“创建”元素的是用户通过将元素拖到舞台上，我们不能使用 $w API 创建/删除元素。一个接近的近似值可以是 扩张 / 坍塌 不过，类似的东西：
...
appendChild(parentInstance, child) {
$w(`#${child.props.id}`).expand();
} removeChild(parentInstance, child) {
$w(`#${child.props.id}`).collapse();
}
...
真正的实现有更多的步骤，然而，这就是它的要点。
你可以看到完整的实现 这里 .
更复杂的例子
要查看和使用代码，首先登录到 Wix，然后单击链接“查看和修改代码”，然后启用“开发模式”。
Enable “Velo Dev Mode”
待办事项清单— 查看和修改代码 | 只是现场
二十一点游戏—— 查看和修改代码 | 只是现场
作为练习，您可能想尝试使用命令式 $w 方法来实现它。
最后的想法
老实说，几个月前，当我负责调查 Velo 是否可以从 React 中受益时，我非常怀疑。
主要是因为它不是“真正的”反应：JSX 结构并不代表“真正的”组件。也就是说，react 不会“创建”屏幕上的内容。在我们的例子中，React 只是修改现有组件——所以结构无关紧要，只有组件标识符。
当 react-velo 准备好，我开始玩它，看看其他同事用它做了什么（主要是 沙哈尔塔尔米 ），我看到了它在使用熟悉的机制管理应用程序状态方面带来的巨大价值——我被卖了。
如果你正在使用 Velo，我建议你试一试 react-velo，看看它是如何为你工作的，并在评论中告诉我。
附言
您可能还想结帐 伊坦的视频 他在这里回顾了 react-velo 并将其与 $w 的命令式方法进行了比较。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
