solid-js详细教程

第一章：为什么选择solid-js？

Solid 官网 给出了以下理由

高性能 - 始终在公认的 UI 速度和内存利用率基准测试中名列前茅
强大 - 可组合的反应式原语与 JSX 的灵活性相结合
务实 - 合理且量身定制的 API 使开发变得有趣而简单
生产力 - 人体工程学和熟悉程度使构建简单或复杂的东西变得轻而易举
主要优势

1. 高性能 - 接近原生的性能，在 js-framework-benchmark 排名中名列前茅
2. 极小的打包体积 - 编译为直接的DOM操作，无虚拟DOM，极小的运行时（类似于 Svelte），适合打为独立的 webComponent 在其它应用中嵌入
3. 易于使用 - 近似 React 的使用体验，便于快速上手
    

第二章：Hello World!

新建项目
npx degit solidjs/templates/js my-app
cd my-app
npm i
npm run dev
1
2
3
4
基本示例
这里将 App 组件渲染到 body 容器中

这里修改默认示例， 从零开始尝试

// App.JSX
import { render } from "solid-js/web";

function App() {
  return (
    <div>Solid My App</div>
  );
}
// 组件声明也可以直接用箭头函数
/*
const App = ()=> (<div>Solid My App</div>);
*/

render(() => <App />, document.querySelector("body"));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
是不是看起来非常熟悉，就和 React 一样，非常舒服
 

第三章：solid-js语法

第四章：案例一：文章列表及显示文章