Fancy Front End Fancy Front End
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)

Jonsam NG

让有意义的事变得有意思,让有意思的事变得有意义
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)
  • 开始上手
  • Plan 计划
  • typescript-utility

  • single-spa源码

  • qiankun源码

  • webpack

  • axios

  • solid

    • 开始上手
      • 目录
      • 什么是 solidjs
      • Solid 理念
      • 参考
    • 计划跟踪
    • 渲染

  • vite源码

  • jquery源码

  • snabbdom

  • am-editor

  • html2canvas

  • express

  • acorn源码

  • immutable.js源码

  • web
  • solid
jonsam
2022-09-06
目录

开始上手

# 目录

  • 目录
  • 什么是 solidjs
    • 特点
    • 它既让你感到熟悉又现代
    • 满载所有功能
    • 细粒度的响应性意味着你可以事半功倍
    • 专注于性能: 无论是客户端还是服务端
  • Solid 理念
  • 参考

# 什么是 solidjs

一个用于构建用户界面,简单高效、性能卓越的 JavaScript 库。

# 特点

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

# 它既让你感到熟悉又现代

Solid 站在 React, Knockout 等巨人的肩膀上。如果你之前用 React Hooks 开发过,Solid 应该看起来很自然。事实上,Solid 模型更简单,没有 Hook 规则。每个组件执行一次,随着依赖项的更新,钩子和绑定会多次执行。

Solid 遵循与 React 相同的理念,具有单向数据流、读 / 写隔离和不可变接口。但是放弃了使用虚拟 DOM,使用了完全不同的实现。

# 满载所有功能

Solid 支持所有常见的和预期的库功能,并在各个方面进行扩展以增强开发体验。

  • Fragments
  • Portals
  • Context
  • Suspense
  • 错误边界
  • 组件懒加载
  • 异步和并发渲染
  • 隐式事件委托
  • 服务端渲染和注水
  • 指令
  • Streaming

# 细粒度的响应性意味着你可以事半功倍

Solid 的每个部分都建立在 JSX 视图中 JavaScript 表达式的简单 primitive 之上。

Solid 解锁了对更新内容和时间的完全控制,即使在 DOM 绑定级别也是如此。没有虚拟 DOM 或广泛的差异对比,框架永远不会做额外工作。

# 专注于性能:无论是客户端还是服务端

细粒度响应式这一策略在所有显眼的基准测试中大放异彩。虽然性能可能不是你的关注点,但最终会影响到用户体验。Solid 无需额外的开发复杂度就可以获得很好的性能。就是说无需特意调优就可以运行很快。

# Solid 理念

Solid 的设计提出了一些可以帮助我们最好地构建网站和应用程序的原则和价值观。当你了解 Solid 背后的哲学时,学习和使用 Solid 会更容易。

  • 声明式数据 :声明式数据是将数据行为的描述与其声明联系起来的实践。这允许我们通过将数据行为的所有方面打包在一个地方来轻松组合。

  • 消失的组件 :在不考虑更新的情况下构建组件已经够难的了。Solid 的组件更新是彼此完全独立的。组件函数被调用一次,然后就不再存在。组件的存在是为了组织你的代码,而不是其他。

  • 读/写 分离 :精确的控制和可预测性有助于打造更好的系统。我们不需要真正的不变性来强制执行单向数据流,只需要能够有意识到哪些消费者可能会写,哪些可能不会。

  • 简单胜于容易 :细粒度响应性教会我们:明确且一致的约定即使需要更多努力也是值得的。且有必要提供最少的工具作为构建的基础。

# 参考

  • SolidJS · Reactive Javascript Library (opens new window)
  • SolidJS・反应式 JavaScript 库 (opens new window)
编辑 (opens new window)
上次更新: 2022/09/14, 18:44:08
cancel 取消请求
计划跟踪

← cancel 取消请求 计划跟踪→

最近更新
01
渲染原理之组件结构与 JSX 编译
09-07
02
计划跟踪
09-06
03
带着原理重读 React 官方文档(一)
08-23
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Fancy Front End | Made by Jonsam by ❤
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式