Riot.js 中根组件属性更新的问题分析与解决方案

问题背景

在 Riot.js 项目中，当我们需要在旧版 Riot3 组件中嵌入新版 Riot 组件时，通常会使用一个代理组件(proxy)来实现兼容。这种技术方案在 Riot.js 4 到 9.0.3 版本中工作良好，但在 9.0.4 及更高版本中出现了属性类型被强制转换为字符串的问题。

技术细节分析

问题的核心在于 Riot.js 9.0.4 版本对属性处理逻辑的变更。在之前的版本中，通过 Object.defineProperty 直接修改组件实例的 props 属性是有效的，但在新版本中，Riot.js 会在每次更新时强制将 DOM 节点上的属性值作为 props 的来源，这导致了以下问题：

1. 属性优先级变更：新版本中 DOM 节点属性值优先级高于通过代码设置的 props 值
2. 类型转换问题：DOM 属性总是字符串类型，导致数值等类型被强制转换
3. 更新机制变化：组件更新时会重新从 DOM 属性初始化 props

临时解决方案

在找到最终解决方案前，可以采用以下临时方案：

_updateRiotComponent() {
    const node = this.component.root;
    const props = this.getProps();

    // 保存当前属性
    const attributes = Array.from(node.attributes)
        .map(attr => ({ name: attr.name, value: attr.value }))
        .filter(attr => !['is', 'data-is', 'class'].includes(attr.name));

    // 移除属性以避免被 Riot 读取
    attributes.forEach((attr) => {
        node.removeAttribute(attr.name);
    });

    // 覆盖 props 并更新组件
    Object.defineProperty(this.component, 'props', {
        value: props,
        enumerable: false,
        writable: false,
        configurable: true
    });

    this.component.update();

    // 恢复原有属性
    attributes.forEach(attr => {
        if (!node.hasAttribute(attr.name)) {
            node.setAttribute(attr.name, attr.value);
        }
    });

    // 处理类名重复问题
    node.classList = arrayUnique([...node.classList]).join(' ');
}

这种方案虽然能解决问题，但存在性能问题和视觉闪烁风险。

推荐解决方案

Riot.js 官方推荐使用纯组件(pure component)模式来绕过默认的属性处理逻辑。纯组件可以完全控制 props 的传递方式，不受 DOM 属性影响。实现方式如下：

1. 创建一个高阶组件(HOC)来处理 props 传递
2. 使用 riot.pure 标记组件为纯组件
3. 在纯组件中手动控制子组件的 props

示例代码结构：

<static-props>
  <script>
    import { pure } from 'riot'
    
    export default pure((opts) => {
      return {
        mount(el, parentScope) {
          // 手动创建并挂载目标组件
          const component = riot.component(opts.component)()
          component.props = opts.props
          component.mount(el)
          
          return {
            // 返回更新和卸载方法
            update(newProps) {
              component.props = newProps.props
              component.update()
            },
            unmount() {
              component.unmount()
            }
          }
        }
      }
    })
  </script>
</static-props>

迁移建议

对于长期维护的大型项目，建议：

1. 逐步将旧版 Riot3 组件迁移到新版 Riot 格式
2. 为过渡期设计统一的代理组件规范
3. 在组件设计时明确区分属性和 props 的用途
4. 建立类型检查机制避免属性类型问题

总结

Riot.js 9.0.4 版本的属性处理逻辑变更是为了提供更一致的开发体验，虽然这给某些特定场景下的兼容性带来了挑战，但也促使我们采用更规范的组件设计模式。通过纯组件技术，我们可以灵活控制 props 的传递方式，同时为未来的组件迁移奠定良好基础。