Mitosis：跨框架的 UI 組件解決方案

定義

Mitosis 是一個開源工具，可以將 JSX 組件轉換爲 Angular、React、Qwik、Vue、Svelte、Solid 和 React Native 等框架的功能齊全的組件。

爲什麼要使用 Mitosis？

藉助 Mitosis，您可以簡化工作流程並減少冗餘，同時又不會損害設計系統的質量。無論您使用的是 React、Vue 還是任何其他框架，Mitosis 都能確保您的設計語言清晰一致。

Mitosis 通過擁有單一事實來源簡化開發過程，加快了項目時間表，使您的團隊能夠更多地關注創新而不是集成。

優勢

跨框架兼容性：Mitosis 允許開發者編寫一次組件，然後編譯成多個主流前端框架的代碼，極大地提高了開發效率和組件的可複用性。
類型安全：基於 TypeScript，Mitosis 保證了組件代碼的類型安全，減少了運行時錯誤。
統一設計系統：對於需要維護多框架設計系統庫的項目，Mitosis 可以減少重複勞動，降低維護成本。
易於集成：提供了清晰的配置指南和 CLI 工具，使得 Mitosis 可以輕鬆集成到現有項目中。
集成 Figma：將你的設計系統從 Figma 同步到代碼，並跨框架將其發佈到 npm。

詳細使用方法

1. 安裝和配置

首先，通過 npm 或 yarn 安裝 Mitosis 及其 CLI 工具：

npm install @builder.io/mitosis @builder.io/mitosis-cli --save-dev
# 或者
yarn add @builder.io/mitosis @builder.io/mitosis-cli --dev

接着，在項目根目錄下創建 mitosis.config.js 文件，配置 Mitosis 的通用設置和目標框架設置：

// mitosis.config.js
module.exports = {
  files: 'src/**',
  targets: ['react', 'vue', 'svelte'],
  dest: 'dist',
  options: {
    react: { typescript: true, stylesType: 'style-tag' },
    vue: { typescript: true, version: 3 },
    solid: { typescript: true, stylesType: 'styled-components' },
  },
};

2. 編寫組件

在 src 目錄下，你可以開始編寫 Mitosis 組件。這些組件是返回 JSX 結構的簡單函數，使用類似 React Hooks 的 useStore 來管理狀態。

// src/MyComponent.lite.tsx
import { useStore } from '@builder.io/mitosis';

export default function MyComponent(props) {
  const state = useStore({
    count: 0,
    increment() {
      state.count += 1;
    },
  });

  return (
    <div>
      <button onClick={state.increment}>Count: {state.count}</button>
    </div>
  );
}

3. 編譯組件

使用 Mitosis CLI 工具編譯組件，將組件轉換爲不同框架的代碼：

npx mitosis build
# 或者
yarn mitosis build

指定額外的構建目標：

npx mitosis build --targets react,vue,svelte

編譯完成後，你可以在 dist 目錄下找到不同框架的組件代碼。

上述命令會將MyComponent.lite.tsx組件編譯成 React、Vue 和 Svelte 框架下的代碼，並放置在指定的輸出目錄中（默認是dist目錄，但可以通過mitosis.config.js文件進行配置）。

4. 集成到項目中

將編譯後的組件代碼集成到你的前端項目中，按照目標框架的規範進行進一步開發和維護。

具體示例

假設你有一個簡單的計數器組件，你希望它能在 React 和 Vue 項目中運行。

集成到 React 項目中

複製編譯後的文件：將dist/react/MyComponent.jsx（或.tsx，取決於你的 React 項目配置）文件複製到 React 項目的組件目錄下。
引入並使用組件：在 React 組件中引入並使用MyComponent組件。

// MyReactComponent.jsx
import React from 'react';
import MyComponent from './path/to/MyComponent'; // 路徑根據你的項目結構來

function MyReactComponent() {
  return (
    <div>
      <h1>React中使用Mitosis組件</h1>
      <MyComponent />
    </div>
  );
}

export default MyReactComponent;

集成到 Vue 項目中

複製編譯後的文件：將dist/vue/MyComponent.vue文件複製到 Vue 項目的組件目錄下。
註冊並使用組件：在 Vue 組件中註冊並使用MyComponent組件。

<!-- MyVueComponent.vue -->
<template>
  <div>
    <h1>Vue中使用Mitosis組件</h1>
    <MyComponent />
  </div>
</template>

<script>
import Counter from './path/to/MyComponent.vue'; // 路徑根據你的項目結構來

export default {
  components: {
    MyComponent
  }
}
</script>

注意事項

文件擴展名：根據你的項目配置和偏好，Mitosis 編譯後的文件可能是.jsx、.tsx或.vue等擴展名。
路徑問題：在引入組件時，確保路徑正確無誤，這取決於你的項目結構和文件放置位置。
類型安全：由於 Mitosis 基於 TypeScript，它提供了類型安全的保障。但在集成到 React 或 Vue 項目時，請確保你的項目也支持 TypeScript，或者將.tsx文件轉換爲.jsx文件（對於 React），這可能需要額外的轉換步驟。
樣式處理：Mitosis 組件的樣式通常通過 CSS-in-JS 或內聯樣式來處理。在集成到 Vue 時，你可能需要將樣式轉換爲 Vue 的<style>標籤或使用單文件組件（SFC）的<style scoped>來確保樣式封裝。

通過以上步驟，你可以將 Mitosis 組件輕鬆集成到 React 和 Vue 等前端框架中，實現跨框架的 UI 組件複用。

與 Visual Copilot 和 Figma 的結合

Mitosis 官網上還介紹了可以利用 Mitosis 與 Visual Copilot 結合來有效地將 Figma 設計轉化爲代碼。

結語

Mitosis 的靈感來自許多現代框架。你將看到一些組件，它們看起來像 React 組件並使用類似 React 的鉤子，但具有像 Vue 一樣的簡單可變狀態，使用像 Solid 一樣的靜態 JSX 形式，像 Svelte 一樣進行編譯，並使用像 Angular 一樣的簡單規範結構。項目中需要類似設計的時候，不妨試一試 Mitosis。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/mcvYe4OzQYOUnPVqwX3q4Q

定義