前端跨框架组件解决方案

最新推荐文章于 2025-02-28 08:30:00 发布

原创最新推荐文章于 2025-02-28 08:30:00 发布 · 1.4k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #深度学习 #面试 #前端框架 #vue.js #react.js

跨框架组件的开发，是一个兼顾用户体验（UX）和开发者体验（DX）的重要问题。随着前端技术生态的快速发展，如何开发能够适配不同框架的组件已成为UI一致性、业务多技术栈需求以及渐进式重构中的重要挑战。

一、跨框架组件的使用场景

1. 大型业务的多技术栈需求

大型业务企业的前端团队可能使用不同的技术栈（如 React 和 Vue）。通过跨框架组件库，可以实现组件复用，减少重复开发的成本，同时保持设计一致性。

2.UI交互的一致性

一个成功的设计系统需要在不同框架和平台中提供一致的用户体验。跨框架组件能确保设计一致性和交互统一，从而提高用户满意度。

3.第三方库或插件

第三方组件库（如日期选择器、图表库等）需要适配多种框架以覆盖更广泛的用户群体，提升组件的可复用性。

4.渐进式重构

在技术栈迁移过程中（如从 AngularJS 迁移到 React），跨框架组件可以帮助团队在不同框架之间平滑过渡，同时兼容旧框架和新框架。

二、解决方案

在实际开发中，有以下四种常见方案可以帮助我们实现跨框架组件的目标：

1. Web Components

Web Components 是浏览器原生支持的技术，它由 Shadow DOM、Custom Elements 和 HTML Templates 组成，可以在任何框架中使用。

优点

原生支持，无需依赖框架。
跨框架兼容性好。
可封装复杂逻辑并隐藏实现细节。

缺点

与框架的状态管理和事件机制集成较复杂。
学习曲线较高，部分 API 浏览器兼容性有限。

代码示例

class MyButton extends HTMLElement {
  // 监听 label 属性变化
  static get observedAttributes() {
    return ['label'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        button {
          background-color: var(--button-bg-color, #007bff);
          color: var(--button-text-color, white);
          border: none;
          border-radius: var(--button-border-radius, 4px);
          padding: var(--button-padding, 10px 20px);
          font-size: var(--button-font-size, 16px);
          cursor: pointer;
        }
        button:hover {
          background-color: var(--button-hover-bg-color, #0056b3);
        }
      `;

    // 创建按钮元素
    this.button = document.createElement('button');

    // 添加样式和按钮到 Shadow DOM
    this.shadowRoot.appendChild(style);
    this.shadowRoot.appendChild(this.button);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.button.textContent = newValue;
    }
  }

  set label(value) {
    this.setAttribute('label', value);
  }

  get label() {
    return this.getAttribute('label');
  }
}

customElements.define('my-button', MyButton);

在 React 中使用：

import { useEffect, useRef } from 'react';
import '../components/UserCard/index.js'

const Home = () => {
    const buttonRef = useRef();

    useEffect(() => {
        const handleClick = () => {
            alert('React handled click!');
        };

        const button = buttonRef.current;
        if (button) {
            button.addEventListener('click', handleClick);
            return () => {
                button.removeEventListener('click', handleClick);
            };
        }
    }, []);

    return <my-button ref={buttonRef} label="React Button"></my-button>;
};

export default Home;

2. Mitosis

官方Slogan：Write components once, run everywhere.

Mitosis 是一个开源工具，它能将 JSX 组件转换为适用于诸如 Angular、React、Qwik、Vue、Svelte、Solid 以及 React Native 等框架的全功能组件。开发者编写一次代码，可以生成多种框架的实现。

Mitosis 有点类似于 Taro 在小程序开发中的存在，一次React或Vue开发和编译后，可以在多个不同的小程序中运行。

优点

一次开发，多框架生成。
集成现有技术栈，降低维护成本。

缺点

生成的代码可能较复杂，不适合高度定制化场景。
需要依赖 Mitosis 的生态，有自身的语法，有一定的学习成本。

代码示例

编写一个 Mitosis 组件：

import { useState } from "@builder.io/mitosis";

export default function MyComponent(props) {
  const [name, setName] = useState("Steve");

  return (
    <div>
      <input
        css={{
          color: "red",
        }}
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      Hello! I can run natively in React, Vue, Svelte, Qwik, and many more frameworks!
    </div>
  );
}

可以编译成Vue组件代码：

<template>
  <div>
    <input
      class="input"
      :value="name"
      @change="async (event) => (name = event.target.value)"
    />
    Hello! I can run natively in React, Vue, Svelte, Qwik, and many more
    frameworks!
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("Steve");
</script>

<style scoped>
.input {
  color: red;
}
</style>

编译成 Angular 组件代码：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { Component } from "@angular/core";

@Component({
  selector: "my-component",
  template: `
    <div>
      <input
        class="input"
        [attr.value]="name"
        (change)="name = $event.target.value"
      />

      Hello! I can run natively in React, Vue, Svelte, Qwik, and many more
      frameworks!
    </div>
  `,
  styles: [
    `
      :host {
        display: contents;
      }
      .input {
        color: red;
      }
    `,
  ],
})
export default class MyComponent {
  name = "Steve";
}

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: [MyComponent],
})
export class MyComponentModule {}

3. Ark UI

Ark UI 是一个无框架依赖的组件库，提供框架无关的核心逻辑和 API，开发者可以将它使用到 React、Vue 或 Solid 开发中。

优点

提供基础逻辑，适配各框架。
社区支持活跃，文档完善。

缺点

需要手动适配 UI 层。
对新手开发者不够友好。

比较类似的一个UI组件库是 Park UI。

官方介绍：Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.

4. Zag.js

Slogan：UI components powered by Finite State Machines.

Zag.js 是一个声明式的 UI 组件逻辑框架，专注于逻辑与 UI 分离。它提供了框架无关的状态管理和交互逻辑，开发者可以通过适配器将逻辑集成到 React、Vue、Solid 和 Svelte中。

优点

将复杂组件的逻辑抽象为状态机（State Machines），提供清晰的状态管理和事件处理流程，更易于调试和维护复杂的组件交互。

缺点

有特定的语法，有一定学习成本

代码示例

实现一个跨框架的数字输入组件：

React代码示例：

import * as numberInput from "@zag-js/number-input"
import { useMachine, normalizeProps } from "@zag-js/react"

export function NumberInput() {
    const [state, send] = useMachine(numberInput.machine({ id: "1" }))  
    const api = numberInput.connect(state, send, normalizeProps)
    return (
        <div {...api.getRootProps()}>
            <label {...api.getLabelProps()}>Enter number:</label>
            <div>
                <button {...api.getDecrementTriggerProps()}>DEC</button>
                <input {...api.getInputProps()} />
                <button {...api.getIncrementTriggerProps()}>INC</button>
            </div>
        </div>
    )
}

Solid代码示例：

import * as numberInput from "@zag-js/number-input"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId } from "solid-js"

export function NumberInput() {
    const [state, send] = useMachine(numberInput.machine({ id: createUniqueId() }))
    const api = createMemo(() => numberInput.connect(state, send, normalizeProps))
    
    return (
        <div {...api().getRootProps()}>
          <label {...api().getLabelProps()}>Enter number:</label>
          <div>
            <button {...api().getDecrementTriggerProps()}>DEC</button>
            <input {...api().getInputProps()} />
            <button {...api().getIncrementTriggerProps()}>INC</button>
          </div>
        </div>
    )
}

Vue 代码示例：

<script setup>
import * as numberInput from "@zag-js/number-input";
import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed } from "vue";

const [state, send] = useMachine(numberInput.machine({ id: "1" }));
const api = computed(() =>
  numberInput.connect(state.value, send, normalizeProps)
);
</script>

<template>
  <div ref="ref" v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()">Enter number</label>
    <div>
      <button v-bind="api.getDecrementTriggerProps()">DEC</button>
      <input v-bind="api.getInputProps()" />
      <button v-bind="api.getIncrementTriggerProps()">INC</button>
    </div>
  </div>
</template>