关于 Mitosis

Mitosis 概览

Mitosis 是 JSX 的一个子集。它支持为多个前端框架生成代码，包括 React、Vue、Angular、Svelte 和 Solid。

目录

• 如何工作
• 格式选项
• 项目结构
• 组件
• 上下文
• 钩子
• 需注意的事项
• 可定制性
• 配置
• 命令行界面

如何工作

Mitosis 使用了受 Solid 启发的 JSX 的静态子集。这意味着我们可以将其解析为一个简单的 JSON 结构，然后轻松构建针对各种框架和实现的序列化器。

export function MyComponent() {
  const state = useStore({
    name: 'Steve',
  });
  return (
    <div>
      <input value={state.name} onChange={(event) => (state.name = event.target.value)} />
    </div>
  );
}

转换为：

{
  "@type": "@builder.io/mitosis/component",
  "state": {
    "name": "Steve"
  },
  "nodes": [
    {
      "@type": "@builder.io/mitosis/node",
      "name": "div",
      "children": [
        {
          "@type": "@builder.io/mitosis/node",
          "name": "input",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

这可以被重新序列化为许多语言和框架。例如，要支持 Angular，我们只需创建一个循环遍历 JSON 并生成以下内容的序列化器：

@Component({
  template: `
    <div>
      <input [value]="name" (change)="name = $event.target.value" />
    </div>
  `,
})
class MyComponent {
  name = 'Steve';
}

通过插件系统，添加对框架的支持非常容易（文档即将推出）。

格式选项

Mitosis 支持生成代码以匹配您喜好的格式、库等的设置。这些输出选项将很快支持通过插件进行自定义和扩展。