在2021年的JavaScript调查中，黑马Solid.js一马当先，超越了React和Svelte两大竞争对手，位居榜首。尽管React仍然拥有不错的市场份额，但低估Solid.js将是一个很大的错误。React开发人员会发现Solid非常熟悉。看看下面用Solid.js编写的简单计数程序：functionCounter(){const[count,setCount]=createSignal(0);return(
当前计数是：{count()}
setCount((x)=>x+1)}>Plus);}我敢保证，即使您从未接触过Solid.js，React开发人员也可以轻松阅读这段代码。这是因为Solid.js在API方面类似于React。原因之一是Solid.js也使用JSX，这意味着React开发人员在他们的DNA中使用元素和组件的方式也将反映在Solid.js中。例如，下面的“Welcome”组件可以像React应用类型一样实现：functionWelcome(props){return
Welcome,{props.name}
;}两者之间的相同点不仅限于此，Solid.js在原语的使用上也类似于React的hook，大部分Solid响应式原语的API都可以在React的hooks中找到。但请注意，Solid.js不是ReactAPI的复制品，直接在Solid.js中运行的React应用肯定无法运行。但不得不说，拥有这样一个与React如此相似的API对大多数开发者来说是一件好事，至少学习曲线不会太陡峭。一切都是关于基元的尽管两者在表面上有如此多的相似之处，但正是它们之间的差异造就了Solid。这与组件无关。Solid曾自豪地称其组件为“消失的组件”。Solid的组件在代码组织阶段很有用，但在初始渲染阶段之前您不会再看到它们。与React不同，Solid.js宇宙的中心实际上是原语。Solid有一套“完整的响应式原语集”。这些原语的功能类似于React的钩子，但有一些不同。对于React来说，hook是独立于React的组件生命周期的，需要用户对虚拟DOM和React的渲染生命周期有一定的了解。而它的独立性意味着开发者需要下功夫去玩hooks。首先我们以一个React组件为例：functionCounter(){const[count,setCount]=useState(0);useEffect(()=>{document.title=`当前计数为：${count}`;},[count]);return(
当前计数是：{count}
setCount((x)=>x+1)}>Plus);}这个例子虽然不难，但是也涉及到几个必不可少的规则，忽略这些规则会造成一些不必要的麻烦。但是Solid的响应式原语不同，它们让你可以毫无顾虑地使用它们。您可以有选择地调用这些基元，即使在组件中您也可以选择不调用它们。用Solid重写上面的例子，像这样：const[count,setCount]=createSignal(0);createEffect(()=>{document.title=`当前计数为：${count()}`;});functionCounter(){return(
当前计数为：{count()}
setCount((x)=>x+1)}>Plus);}将所有响应式图形元素移到组件外部和方法。我们能做到这一点的原因完全是因为Solid是建立在响应式原语本身之上的，而不是完全依赖于组件。响应式或虚拟DOM与其他流行的框架一样，“虚拟DOM”的概念是React框架的核心。VirtualDOM指的是用来描述内存中真实DOM的JS对象。因为创建虚拟DOM的成本远低于创建真实DOM，所以多次运行组件或更新虚拟DOM的成本更低。除非真实DOM被修改，否则React将更新虚拟DOM以匹配真实DOM。要想在React中熟练调用hooks，意味着开发者需要对虚拟DOM的生命周期有一定的了解。另一方面，Solid.js更依赖于一套“完美”的响应能力。例如Solid程序中的JSX语句依赖于一个反应信号，即只有依赖于这个信号值的JSX会随着信号的变化在方法中被重新调用。对于在createEffect原语中运行的所有效果也是如此，如果效果依赖于一个或多个响应值，则只有当这些值发生变化时才会重新渲染。这样就不需要依赖数组了，因为Solid已经提前知道哪些值可以改变，那些需要重新渲染的效果就是受这些响应值的影响。这就是为什么上一篇文章说Solid中的组件“消失”了，以及如何在组件外部调用响应式原语。初始渲染后，只有应用程序的“完整”部分存在。React搞清楚这两个框架底层工作原理的“小笑话”，恐怕会让很多React开发者第一次尝试Solid时手足无措。您重新学习的第一件事是组件不会重新运行。也就是说，我们在React中学到的大部分规则不再适用于Solid.js。我们不需要使用useCallback或useRef调用钩子，因为组件是一次性的。而如果我们想在JavaScript中给变量赋值，只需这样做：functionMyForm(){consthandleSubmit=(e)=>{/*handlesubmit*/};让我输入；//连接到DOM后使用onMount或createEffect读取onMount(()=>myInput.focus());return(
);}第二点重新熟悉一下是的，当prop函数被销毁时，Solid的细粒度响应.js也将被销毁。虽然你可能不会在prop对象中存储任何响应值，但请记住，一旦这些对象被销毁，这些响应就全部消失了。这就是不推荐使用以下代码的原因：functionGreeting(props){const{greeting,name}=props;return({greeting}{name}
);}但是如果这样写，效果会好很多：functionGreeting(props){return({props.greeting}{props.name}
);}或者你可以直接使用Solid的mergeProps或者splitProps函数，在具有响应值的Objects被合并或者撤销同时影响响应性。当React出现时，它挑战了当时最好的架构，并影响了我们今天编写Web应用程序的方式。Solid现在要做的就是重现当年React的影响。原文链接：https://non-traditional.dev/an-intro-to-solidjs-for-react-developers
