上篇我们介绍了如何用Mitosis开发单个组件并编译成react组件的：Mitosis从0到1，一次性开发组件库，通用多个主流框架。这篇来简单介绍下原理。
工作原理
Mitosis是JSX的静态子集，灵感来自于SolidJS。我们可以输入一段简单的JSON，便可以构建不同框架的前端项目。 以下是一段Mitosis代码：
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"
}
}
]
}
]
}
这样的JSON可以序列化成多种语言和框架，比如Angular：
@Component({
template: `
<div>
<input [value]="name" (change)="name = $event.target.value" />
</div>
`,
})
class MyComponent {
name = 'Steve';
}
