精读《SolidJS》

SolidJS 是一个语法像 React Function Component，内核像 Vue 的前端框架，本周我们通过阅读 Introduction to SolidJS 这篇文章来理解理解其核心概念 为什么要介绍 SolidJS 而不是其他前端框架？ 理念的方式，即 SolidJS 根本没有理 React 那套概念，SolidJS 理解的数据驱动是纯粹的数据驱动视图，无论数据在哪定义，视图在哪，都可以建立绑定。 我们继续分析为什么 SolidJS 这样看似简单的衍生状态写法可以生效。 模板编译 为什么 SolidJS 可以这么神奇的把 React 那么多历史顽疾解决掉，而 React 却不可以呢？核心原因还是在 SolidJS 增加的模板编译过程上。

React 中可以写 SolidJS 了？SolidJS 官方出手了

前言 想在 React 中体验 SolidJS 的高效状态管理？react-solid-state 来了！ 正文 react-solid-state 是一个轻量级库，而且是 SolidJS 官方出品的库，旨在将 SolidJS 的反应式状态管理引入 React 生态。 SolidJS 是一个以反应性为核心的 JavaScript 框架，强调高效的 DOM 更新和自动依赖跟踪。 相比 React 的 useState 和 useEffect，SolidJS 的状态管理更简洁，无需手动声明依赖数组。 https://github.com/solidjs/react-solid-state

【SolidJs】仅次于原生JS的超级性能！SolidJs框架教程【上】

背景 今天被战友种草了一款前端框架，打开链接看文章，在各个指标的比较下，SolidJs脱颖而出，下面简单介绍一下这个框架，然后开始记录一下学习笔记。 SolidJs简介 SolidJs作为一个新星）可谓是各个厂牌的集大成者，它支持JSX、Fragments、Context、Portals、Lazy等等，而且是继HyperApp和Svelte后，第三个比纯 JSX + template SolidJs在保持JSX语法的同时，做了一些template的规范，比如它的For、Index、Switch、Match.....既保留了JSX语法的灵活性，又再某些程度提高了编译速度 NO DOM DIFF SolidJs并不像Vue&React采用了虚拟dom，解决了内存占用过多的问题 SolidJs教程 Hello World import { render } from 'solid-js return

Hello World

🎉SolidJS响应式原理和简易实现🎉

演练场地址：https://playground.solidjs.com/ 上篇文章中主要介绍了Solid JS的基本语法，分阶段粗略地介绍了一些原理（响应式原理、编译原理和运行时原理）。 content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>SolidJS 本系列未来的计划： SolidJS响应式原理和简易实现 SolidJS模板编译过程 SolidJS源码学习过程总结

浅谈React与SolidJS对于JSX的应用

但，并非只有React利用了JSX，VUE、SolidJS等JS库或者框架都使用了JSX这一概念。网上已经有大量关于JSX的概念与形式的讲述文章，不在本文的讨论范围。 SolidJS中的JSX SolidJS是新发展起来的又一响应式框架，同样的，SolidJS也使用JSX来完成视图层的编写。 不同于React的是，Solid 模型更简单，没有 Hook 规则。 工程于编译JSX 同样的，基于浏览器无法直接解析JSX事实，所以我们会比较好奇SolidJS编译出的内容，是什么样的。 在SolidJS提供的Playground中（Solid Playground (solidjs.com)），我们可以更加直观的看到SolidJS将JSX编译为了什么结果： import { createSignal 同样用到了Babel对SolidJS的代码进行编译。

基于webpack与TypeScript的SolidJS项目搭建

本文将讲述如何基于webpack与TypeScript搭建一个基础的支持less模块的solidjs项目。方便后续涉及到solidjs相关分析与讨论都可以基于本文的成果之上进行。 前置 nodejs v14+ 全局yarn（npm亦可） 稳定的网络环境 创建根目录solidjs-webpack-ts-example： mkdir solidjs-webpack-ts-example cd solidjs-webpack-ts-example yarn初始化 ➜ solidjs-webpack-ts-example git:(main) yarn init yarn init v1.22.19 question name (solidjs-webpack-ts-example): question version (1.0.0): question description 2件套 yarn add solid-js @solidjs/router solid-js：SolidJs核心库； @solidjs/router：solidjs官方SPA路由组件。

SolidJS创建者谈Web框架复杂性

Ryan Carniato，SolidJS 和 SolidStart 的创建者，表示 Angular 和 Vue 将是 2025 年值得关注的 JavaScript 框架。 译自 SolidJS Creator on Confronting Web Framework Complexity，作者 Loraine Lawson。 如果您不熟悉 Carniato，他是 SolidJS 框架 和 2024 年推出的元框架 SolidStart 的创建者。 ——Ryan Carniato，JavaScript框架SolidJS的创建者 “过去几年中，受SPA影响的同构（相同的代码在客户端/服务器端运行方式不同）方法与受MPA影响的分裂执行（Islands/

SolidJS硬气的说：我比React还react

一查，原来是个框架作者，作品叫SolidJS[1]。 ? 而SolidJS则采用了类似Svelte的方案：在编译时，将状态更新编译为独立的DOM操作方法。 这样做有什么好处？主要有两点。 而在SolidJS中，未使用的功能不会出现在编译后的代码中。 这为他带来了额外的好处：在真实项目（>120kb）中，SolidJS的代码体积比Svelte小25%左右。 还真是，因祸得福？ ? 参考资料 [1] SolidJS: https://github.com/solidjs/solid

这些前端新技术你很难再忽视了 —— SolidJS

What 什么是 SolidJS？ 答：SolidJS是用于构建用户界面的声明式、高效且灵活的 JavaScript 库。 答：https://www.solidjs.com/docs/latest 左边是文档解释、右边是在线运行的代码，学起来真方便！！ When SolidJS 什么时候诞生的？ 答：SolidJS 框架由 Ryan Carniato 创建，于 2018 年开源。 SolidJS 妥妥的“够新！！” GitHub star history，这曲线！！逆天了！！ Who Ryan Carniato 是个什么级别的人物？ 答：他自称是前端 JS 性能追求者、响应式编程的超级粉丝，是 Marko 核心团队成员、 SolidJS UI 库的作者。 How 怎么使用？

这些前端新技术你很难再忽视了 —— SolidJS

什么是 SolidJS？ 答：SolidJS是用于构建用户界面的声明式、高效且灵活的 JavaScript 库。 答：www.solidjs.com/docs/latest 左边是文档解释、右边是在线运行的代码，学起来真方便！！ When SolidJS 什么时候诞生的？ 答：SolidJS 框架由 Ryan Carniato 创建，于 2018 年开源。 SolidJS 妥妥的“够新！！” GitHub star history，这曲线！！逆天了！！ Who Ryan Carniato 是个什么级别的人物？ 答：他自称是前端 JS 性能追求者、响应式编程的超级粉丝，是 Marko 核心团队成员、 SolidJS UI 库的作者。 How 怎么使用？

学不完的框架，🐔啄不完的米，SolidJS，你到底爱谁？😘

最近刚刚整明白点Svelte感觉整个世界都清净了，但是昨天，有人给我介绍了SolidJS Svelte原理和进阶看这篇就够了 当时我心想：这又是啥玩意啊！ ❝ SolidJS的发布订阅模式也是基于Proxy的。下篇文章会做详细的对比。 ❞ 和React不同的是，reead是个方法，这也是前面模板使用count()，而不是count的原因。 看着SolidJS朴素的运行时原理， 你才回过神来，发现你曾经邂逅过的一切，它早已拥有， 你爱慕着的，也为你准备完毕， 最后你不禁感叹，SolidJS才是你那个： 『众里寻他千百度，慕然回首，那人却在， 好了好了，不做梦了，今天的分享就这些了， 下篇文章会介绍下SolidJS别的用法以及响应式原理。 敬请期待！

最近风靡一时的 “No DomDiff”潮流是怎么回事？Virtual Dom不香了？

代表作vue1.x Svelte、SolidJS。 代表作：vue1.x Svelte、SolidJS。 SolidJS: 完全可以。 SolidJS简介 类React框架很多，但SolidJS最像.... 这简直是React hooks的双胞胎兄弟... 而且因为SolidJS这种后发优势，没有React沉重的历史包袱，比如不需要处理类组件的兼容（SolidJS只支持函数式）这让它在实现了大部分React功能特性的前提下，源码体积要比React小很多，这让它在首屏加载方面就首先占据上风 所以：SolidJS = React + vue3？

🎉尤雨溪为什么要推出Vapor Mode？🎉

前情提要 在前面两篇文章中反复提到了不同框架编译之后的差异 React编译之后是Jsx函数返回的虚拟DOM Vue编译之后是render函数返回的虚拟DOM SolidJS编译之后返回的真实DOM SolidJS和Svelte由于在编译之后就确定了当状态发生改变UI随之变化的关系，所以仅仅是具体DOM的重新加载。 根据这些不同的更新粗细粒度，他们被分为 粒度 成员 粗粒度 React 中粒度 Vue 细粒度 SolidJS，Svelte 直观感受 为了直观感受更新时的区别，现在我们设计如下关系的组件：      SolidJS、Svelte仅仅是重新加载组件！ 总结 在项目比较小时，SolidJS、Svelte的优势不会很明显， 但是当面对大型项目时，React和Vue的性能短板就显露出来了。 面对这样的压力，尤雨溪在年初的展望里已经预告了Vapor mode，该模式的灵感就是受到了SolidJS的启发。

前端框架svelte/solid/ember

官网：https://www.solidjs.com/-github（30.7k star）：https://github.com/solidjs/solidember完全不同于vue和react语法的框架

这些前端新技术你很难再忽视了 —— Svelte

像 LOL 的 皮城执法官·蔚，和皮城女警是 couple，还有个说法：“目前 React、Vue、Svelte 没人能接住 SolidJS 这一拳”，蔚就是拳师，“先打一拳，再把问题问个遍。” 可以粗暴简单这样记忆，Svelte 和 Vue 是一对，SolidJS 和 React 是一对。 书写风格 Svelte 和 Vue 很像；而 SolidJS 和 React 很像； Why 总在说预编译，为什么要预编译？ 再分享几个有意思的数据：Svelte 在 2020 前端框架满意度排行榜中超越了react，跃升到了第一位，但在 2021 又被 solidJS 给超越了。 小结：先学 Svelte ，再学 SolidJS，紧跟趋势，太卷了吧？！

🚀🚀🚀Astro：一个可以同时写React、Vue、Svelte、SolidJS等多种语言的框架

Astro 是「集多功能于一体的 Web 框架」，用于构建「快速、以内容为中心」的网站。

性能直逼原生JS？这个前端框架牛逼了！

那就让我们来了解下这个牛逼的框架吧~ SolidJs Solid 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。 Solid 支持现代前端特性，比如... SolidJs 特性 直接使用浏览器的 DOM, 没有 虚拟DOM， DOM diff 一整套算法,他的 DOM ，是原生 DOM！ 通过预编译，将 jsx 部分的代码，转换成原生的语法 性能比较 Solid.js 很快,嗯...确实很快,无限接近原生JS，甩开Svelte ，React俩条街~ 安装使用 js安装 npx degit solidjs templates/js my-app cd my-app npm install # or yarn or pnpm npm run dev # or yarn or pnpm ts安装 npx degit solidjs

2024年虚拟DOM技术将何去何从？

Solidjs：一种基于编译的响应式系统 1、Solidjs概述 Solidjs（或称为Solid）是一个类似于Svelte的现代前端框架。它们都基于编译的响应式系统，但在响应性的实现方式上有所不同。 与此同时，Solidjs的语法更接近于React，对于习惯使用React的开发者而言更为友好。 这一过程体现了Solidjs如何将声明式的代码编译为能够直接操作DOM的命令式代码，从而提高运行时性能。 3、“真正的响应式” Solidjs在其官网上被标榜为“真正的响应式”。 4、Solidjs的“细粒度响应”设计与实现 Solidjs的“细粒度响应”是指它能够精确地跟踪和响应每个独立的状态变化，而不是整个组件树的变化。 这种方式使得Solidjs在处理大型应用或复杂交互时具有更高的效率和更好的性能。 5、createSignal 详解 在Solidjs中，createSignal 是实现状态管理和响应式更新的核心。

2024 前端技术盘点：React、Vue、Qwik 谁能领跑 2025？

三、SolidJS 2.0：性能巅峰的前端新宠 如果你对前端开发的高性能和简洁性有极致追求，那么 2024 年的 SolidJS 2.0 更新可能会让你“真香”。 熟悉的语法：如果你用过 React，那么转到 SolidJS 几乎无需重新学习。 更强的灵活性：增强后的 JSX 支持更多的语法特性，同时保留了 SolidJS 的高性能优势。 这正是 SolidJS 为开发者带来的“轻切换”体验。 2、 高级响应式原语：细粒度控制的新高度 SolidJS 以其细粒度的响应性而闻名，而在 2.0 版本中，这一核心特性得到了进一步强化。 `); }); setName("World"); // 输出：Hello, SolidJS! -> Hello, World! 3、 生态系统飞速成长：从工具到社区的全面提升 2024 年，SolidJS 的生态系统迎来了爆发式增长，成为开发者选择它的一大理由。

快来吃瓜，原来国外开发者也会因为哪个框架好吵的不可开交

前言 事情是这样的，今天浏览到了一篇dev上Ryan Carniato大佬（SolidJS库作者）的文章（文末有连接），在文章中，作者阐述了自己对2025年的前段框架的展望，并且提到React、Svelte 以前的文章中提到，根据运行时和编译时，前端框架主要分为三类：重编译时(Svelte、SolidJS)、重运行时（React）、介于两者之间(Angular、Vue)。 根据不同的更新粗细粒度，他们又被分为： 粒度 成员 粗粒度 React 中粒度 Vue 细粒度 SolidJS，Svelte Vue为了细粒度更新，正在努力的研发vapor，React就目前的趋势来看 好戏开场了 下面是第一位老哥的发言：React已死，Svelte、SolidJS当立! 这种回答，立马招惹了Angular粉丝的不满，原因是Angular使用了Signals技术，性能提高了30%!