跨架構解決方案-Mitosis【簡述與原理】

什麼是mitosis?為什麼使用mitosis?

如果團隊使用了多種前端架構去建構前端項目，那麼在系統設計和實作的過程中就不可避免地要對元件進行多架構的設計和實作。而mitosis就可以解決這個問題，通過使用mitosis就可以在元件定義一次設計，并應用于其他前端架構中去。編寫一次元件，編譯到不同的前端架構中去。

mitosis是JSX的一個子集，它支援為許多前端架構生成代碼，包括React、Vue、Angular、Slvelte、Solid。

mitosis是怎麼工作的？

mitosis使用JSX的靜态子集，收到Solid的啟發，意思就是我們可以将其解析為一個簡單的JSON結構，然後輕松建構針對各種架構和實作的序列化器。簡單來說，就是将 mitosis 代碼轉義為 JSON，接下來 mitosis 通過解析這份 JSON 檔案生成其他不同平台的代碼比如：

export function MyComponent() {
  const state = useStore({
    name: 'Steve',
  });

  return (
    <div>
      <input value={state.name} onChange={(event) => (state.name = event.target.value)} />
    </div>
  );
}
           

上述mitosis代碼将轉義為：

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

然後就可以解析上面的JSON重新序列化到許多語言和架構中去。例如，為了支援Angular，我們隻需要建立一個序列化器來周遊JSON并生成：

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

通過插件系統添加架構支援非常容易。mitosis支援對生成代碼進行設定，以比對你的格式、庫等。這些輸出選項很快就可以通過插件進行自定義和擴充。