转自：奇舞精选
定义
转自：奇舞精选
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。
