大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！ Mitosis：单组件编译成Vue、React、Solid、Angular、Svelte等框架代码的利器1。什么是Mitosis？ Mitosis是一个编译时框架，允许您在JSX中编写组件并编译为vanillaJavaScript、Angular、React、Vue等。 Mitosis使用JSX的静态子集，灵感来自Solid。这意味着可以将其解析为简单的JSON结构，然后构建为针对各种框架的序列化程序。 Mitosis可能与Ionic团队使用Stencil所做的工作非常相似。一个主要区别是Mitosis不只是输出组件，而且可以编译成各个框架代码，甚至可以编译为Stencil。 截至2022年4月，Builder。io的Mitosis支持包括几乎所有主流框架代码：VueReactAngularSvelteReactNativeSwiftSolidJsStencilWebComponentsHTMLLiquidTemplateLiteralsJSONBuilder（JSON）2。Mitosis与其他编译时框架相比如何？ 两个非常流行的编译时框架是Svelte和SolidJS。Mitosis与其非常相似，因为它也是一个编译时框架，而且非常快。它的不同之处在于允许生成多个框架，从而实现最大的灵活性。 SolidJS：用于构建用户界面的简单且高效的响应式框架 与SolidJS类似，Mitosis使用将组件编译为JSON的JSX版本。然后插件将组件编译到不同的目标，使您能够在两个过程中创建工具：可以转换成JSON的代码将JSON编译或序列化为目标框架的插件3。为什么使用Mitosis？ Mitosis是一种非常强大和灵活的工具。到目前为止，已经确定三大典型场景可以从中受益。3。1设计系统维护者 如果您是从一个Web框架开始的设计系统库的维护者，那么在为后续框架创建新版本时，您会感受到巨大的维护痛苦和重复劳动。3。2使用多个Web框架的团队 如果您所在的团队使用了多个不同的Web前端框架，那么在所有前端之间协调设计系统以获得好的开发体验绝对是一场噩梦。Mitosis是消除此类问题的出色工具，因为它允许您在组件中定义一次设计并将它们部署到所有单独的前端框架。3。3构建WebSDK的团队 如果您的团队正在为直接集成到Web框架并涉及向最终用户提供组件的产品构建SDK，那么Mitosis非常适合您的团队。 4。如何使用Mitosis4。1如何安装CLI 打开终端并执行以下命令来安装CLI：npminstallgbuilder。iomitosiscli 可以运行mitosishelp，命令将展示具体用法和示例。USAGEmitosiscompiletoformat〔options〕〔files〕mitosiscompiletformat〔options〕〔files〕Ifno〔inputfiles〕arespecifiedorwhen〔files〕is，inputisreadfromstandardinput。EXAMPLESmitosiscompiletreactcomponent。tsxmitosiscompiletreactcomponent。tsxcatcomponent。tsxmitosiscompilethtmlmitosiscompiletreactoutdirbuildsrc。tsx 记住Mitosis只是编译器，仍然需要创建代表组件的JSX文件，然后Mitosis将输出这些文件。4。2如何创建Mitosis项目 首先创建一个新目录并切换：mkdirmitosisexamplecdmitosisexample 创建一个npm项目，以便使用builder。iomitosis包：npminity 强烈建议使用git初始化此目录：gitinit 将Builder。ioMitosis包安装到本地项目中：npminstallbuilder。iomitosis添加JSXMitosis文件 文件名应以lite。jsx结尾touchcomponent。lite。jsx 在VSCode中打开项目：code。 项目在VSCode中有如下结构： 将JSX添加到component。lite。jsx文件中：import｛useState｝frombuilder。iomitosis；exportdefaultfunctionMyComponent（props）｛const〔name，setName〕useState（Alex）；return（inputcss｛｛color：red，｝｝value｛name｝onChange｛（event）setName（event。target。value）｝Hello！IcanruninReact，Vue，Solid，orLiquid！）；｝状态比较 在将component。lite。jsx输出为其他语言之前，请仔细查看状态的使用方式。useState钩子与您在React中的使用方式相同。您可以在下面看到一些框架以及它们如何使用此定义为每个输入适当地分配状态变量。inputcss｛｛color：red，｝｝value｛name｝onChange｛（event）setName（event。target。value）｝ 在JSX中使用的状态变量名称在下面的其他框架中已正确编译。Angularinputclassinput〔value〕name（input）nameevent。target。valueSvelteinputclassinputbind：value｛name｝Vueinputclassinput：valuenameinputnameevent。target。value 5。总结 本文主要和大家介绍下一个优秀的编译时框架Mitosis。因为笔者也没有在生产项目中使用、部署过Mitosis，所以很多探索也就浅尝辄止，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。 参考资料 https：github。comBuilderIOmitosis https：www。builder。ioblogmitosisaquickguide https：solid。redwoodjs。cn
调理脾胃，归脾丸和补中益气丸，哪个更好呢？医生给出建议人体进食后，食物当中的能量需要经过脾胃转化成气血能量，来维持人体的正常运转，如果脾胃出现损伤，那么身体就会出现很多健康问题。脾胃不好是现代人容易出现的问题，常见的有脾气虚……三月份新机预告从目前得到最新工信部入网信息来看，三月份将会是苹果，红米的主场！也是联发科的主场哦3月8号iphonese3线上发布会红米K50宇宙所有机型将会陆续亮相，搭载天玑系列芯片！re……一个足球迷的独白02的中日之战，20年的差距国足0：2从中日之战来看，是双方真实差距的体现！从个人技术、团队配合和球员意识等各个方面，我们的的确确的落后了！自2002年韩日世界杯以来，日本队一直都走在自……四个随时可做的小动作，助您缓解耳鸣今天，教大家四个可以缓解耳鸣的小动作，不花钱很简单，你一定能学会。第一，我们用手掌盖住耳朵在耳廓周围，做顺时针的按摩一次，可以做20圈，可以促进耳周围的血液循环。第……还记得他吗？2年前，包揽得分王助攻王，如今却给落选秀当替补什么叫不进则退？看看如今的德文特格雷厄姆，你就明白了。说起这个名字，可能很多人的印象都已经模糊了，没关系，我来帮你回忆一下。2018年选秀大会上，格雷厄姆在次轮第3……上好佳，大势已去打江山易，守江山难！昔日的膨化食品大王已跌下神坛，就算卖得动情怀，也卖不动虾条了。。。眼看着大势已去，上好佳非常地焦虑。前不久更是传出苏州上好佳公司提前解散的……累了，毁灭吧，40度的天还能吃点啥都立秋了，你敢信？这天儿热得还是奔着要把我送走去的。狂吃冰淇淋已经救不了众生了，大家还是吃点健康养生的食物，以防中暑。三甲天团蒋家騉上海市疾控中心……椰视频漫画让政策解读活起来海南开展社保走基层宣传活动视频加载中。。。新海南客户端、南海网、南国都市报记者6月24日消息（记者谭琦）漫画非常生动，很有趣，我一看就理解了政策。海口市民彭女士点赞的漫画，是海南省社保中心推出的原……勐远仙境邀请非药物健康大师，和大家聊聊高质量健康生活现在的都市人，每天在闹市的喧嚣中穿过，日子过得慵懒且无聊，每到休息日只想睡上一场好觉。虽然习惯了这样的生活，但是在身心疲惫中，大家也会梦想自己正在云朵上舞蹈，抬头踮脚，轻飘飘，……盘点北京十大野长城长城是北京的一张名片，除了八达岭、居庸关、慕田峪这几些知名的长城，还有很多野长城，吸引着无数的户外爱好者去挑战。1。箭扣长城箭扣长城是北京最险野的长城之一！也是驴友……威少是否被需要不重要将为赢球全力以赴北京时间9月26日，湖人后卫拉塞尔威斯布鲁克近期接受了采访。在被问起是否感觉被湖人需要时，威斯布鲁克表示：我不需要。我只需要完成我的工作，我是否被需要其实不重要。我认为最……刘传兴打出加盟澳洲联赛最强一战，赛后主帅表扬做得好，大个子26日，中国球员刘传兴效力的布里斯班子弹队以82比84不敌墨尔本联队。这场比赛中，刘传兴总共出战13分钟，投篮5投4中，得到10分，还抢下5个篮板。这场比赛是刘传兴加盟子弹队后……