大家好，我是Kason。昨天开心上网的时候，看到一个框架测评，效果真的很爆炸。作者用React和Solid.js开发了同样的Demo。为什么用Solid.js来和React比较？再来看看Solid.js的API：HooksContext、PortalAPIErrorBoundaries和React不能说很像，只能说一模一样。而且，Solid.js还使用JSX来描述视图，因此将React应用程序更改为Solid.js应用程序的成本非常小。具体评测结果如何？差异几乎快了三倍。这波React真是有针对性。本文指的是SolidJSvsReact：我在两个库上构建了相同的应用程序。为什么会有这么大的差异？简单介绍一下这个Demo，空白列表的初始渲染：第一次挂载完成后，请求渲染列表数据：这是两个应用ChromeDevToolsPerformance面板的结果：解释一些关键指标:Loading:发起网络请求和解析HTML的时间Scripting:解析、编译、执行JS的时间（包括垃圾回收时间）Rendering:样式和布局计算Painting:paint,composite,decodedimages特别关注Scripting，左边475ms（React）和右边176ms（Solid.js）的差距超过2倍，这么夸张？哪里有问题？前端框架的工作流程可以概括为三个简单的步骤：触发交互计算，交互会影响到哪个DOM来执行DOM操作？这里的交互可能是首屏渲染，可能是点击引起的状态变化，也可能是请求数据。.....在React中，第2步是在运行时完成的，而在Solid.js中，它是在编译时完成的。具体来说，这一步在React中被称为reconcile，更通俗的说法是虚拟DOMdiff算法。在Performance面板下的CallTree中可以看到在执行XHRLoad（请求列表数据）之前有一个耗时的操作（FunctionCall），就是reconcile。在Solid.js应用中，没有这种耗时的操作：在编译时，Solid.js会直接将JSX编译成状态与操作DOM的方法之间的连接。由于JSX过于灵活，为了在编译时有更多的线索建立这种连接，Solid.js在React原有的JSX组件的基础上提供了一些控制流组件：例如下面是在两个框架中遍历列表项实现差异在于：//React
- {list.map(item=>
- {item.name} )}
- //Solid.js
- {item.name} }