在 React 可视化编辑器里，“双向”几乎是标配宣传语：点击画布上的某个元素，能看到对应代码；修改代码，画布立即更新。听起来很对称，但实际用起来往往不是这样。 仔细看大多数工具，你会发现其中一侧在做真正的工作，另一侧只是在旁观。设计工具导出过一次 JSX 后，如果你接着手工改了代码，那基本就再也回不到可视化界面里了。可视化面板确实能改属性，但它改的可能只是内存里的某个临时状态，或是一个 JSON 配置文件，而不是你的真实源码。沙箱能正常预览代码，但当你点击渲染结果想跳回对应文件时，没有任何反应——它根本不知道这个像素是哪个组件生成的。 这些工具都宣称“双向”，但彼此并不对等。总有一方是头等席，另一方只是陪跑。市面上的产品大致可以分成三类。 第一类：只导出一次。设计工具一次性生成 JSX，首次提交看起来非常完美。然而从第二天起，就有人开始手工改代码，这是必然发生的。一旦改了，工具就彻底失去入口，所谓往返协作，其实只是穿了一件马甲的“单程旅行”。 第二类：运行时覆盖层。可视化面板确实能改东西，但它改的是内存中的 prop，或一份额外配置 JSON，而不是源代码。刷新页面后改动消失；或者它永远留在另一个文件里，还得靠手工和真实代码保持同步。换句话说，你的代码不是真相，另外某个文件才是。 第三类：仅预览。CodeSandbox、StackBlitz、普通的 Vite HMR，都很擅长让你看到代码跑起来的效果。可当你点击渲染出来的视图，却什么都没有发生。它们不知道这个像素是由哪段代码产生的，因为这个链接从来没被建立过。 这正是 CrossUI Studio 想做不同的地方。我们称之为“对称协作开发”，简称 SCD。理念说起来很简单，做起来却很难：代码和画布是同一棵 AST 的两个视图。没有哪一方是另一方需要追赶的“唯一真相”。两边都能读，两边都能写，而且它们写入的是同一个地方。 “双向”不能只停留在营销文案里，它应该可以被验证。真正的双向协作必须满足三个条件：第一，代码与画布操作的是同一份真实源码；第二，任何一侧的修改都能被另一侧立即识别并呈现；第三，无论从代码改到画布，还是从画布改到代码，路径都是双向完整的。三个条件缺一个，就不是对称的双向，只是另一个方向的单向而已。
热门跟贴