import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "与其他库进行比较",
  "children": [{
    "depth": 2,
    "value": "React",
    "children": [{
      "depth": 4,
      "value": "迁移建议：",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Vue",
    "children": [{
      "depth": 4,
      "value": "迁移建议：",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Svelte",
    "children": [{
      "depth": 4,
      "value": "迁移建议：",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Knockout.js",
    "children": [{
      "depth": 4,
      "value": "迁移建议：",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Lit & LighterHTML",
    "children": [{
      "depth": 4,
      "value": "迁移建议：",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "S.js",
    "children": []
  }, {
    "depth": 2,
    "value": "RxJS",
    "children": []
  }, {
    "depth": 2,
    "value": "其他",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    h4: "h4",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "与其他库进行比较",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#与其他库进行比较",
        children: "#"
      }), "与其他库进行比较"]
    }), "\n", jsxs(_components.p, {
      children: ["本节无法避免一些偏见，但我认为了解 Solid 的解决方案与其他库的差异很重要。这与性能无关。要对性能有明确的了解，请查看 ", jsx(_components.a, {
        href: "https://github.com/krausest/js-framework-benchmark",
        children: "JS 框架基准测试"
      }), "。"]
    }), "\n", jsxs(_components.h2, {
      id: "react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react",
        children: "#"
      }), "React"]
    }), "\n", jsx(_components.p, {
      children: "React 对 Solid 产生了很大的影响。React Hooks API 中的单向数据流和明确的读写分离影响了 Solid 的 API。Solid 更加像是一个 “渲染库” 而不是一个框架。Solid 对如何在应用程序开发中管理数据有着独到的看法，但并不试图约束执行。"
    }), "\n", jsx(_components.p, {
      children: "然而，尽管 Solid 与 React 的设计理念保持一致，但它的底层运作方式完全不同。React 使用 Virtual DOM 而 Solid 没有。React 的抽象是自上而下的组件分区，其中渲染方法被重复调用和差异对比。相反，Solid 将每个模板整体渲染一次，构建其响应图，然后才执行与细粒度更改相关的指令。"
    }), "\n", jsxs(_components.h4, {
      id: "迁移建议",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#迁移建议",
        children: "#"
      }), "迁移建议："]
    }), "\n", jsxs(_components.p, {
      children: ["Solid 的更新模型与 React 完全不同，甚至与 React + MobX 完全不同。不要将函数组件视为 ", jsx(_components.code, {
        children: "render"
      }), " 函数，而是将它们视为 ", jsx(_components.code, {
        children: "constructor"
      }), "。"]
    }), "\n", jsxs(_components.p, {
      children: ["在 Solid 中，props 和 store 是 ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy",
        children: "proxy objects"
      }), "，它们依赖于属性访问来进行跟踪和响应式更新。注意解构或提前属性访问，这可能导致这些属性失去反应性或在错误的时间触发。"]
    }), "\n", jsx(_components.p, {
      children: "Solid 的 primitive 没有像 Hook 规则这样的限制，因此您可以随意嵌套它们。"
    }), "\n", jsx(_components.p, {
      children: "你不需要使用列表行上的显式 key 来实现具有 key 的行为。"
    }), "\n", jsxs(_components.p, {
      children: ["在 React 中，每当修改输入字段时都会触发 ", jsx(_components.code, {
        children: "onChange"
      }), "，但这不是 ", jsx(_components.code, {
        children: "onChange"
      }), " ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange",
        children: "原生工作的方式"
      }), "。在 Solid 中，使用 ", jsx(_components.code, {
        children: "onInput"
      }), " 订阅每个值的更改。"]
    }), "\n", jsxs(_components.p, {
      children: ["最后，没有 VDOM，所以像 ", jsx(_components.code, {
        children: "React.Children"
      }), " 和 ", jsx(_components.code, {
        children: "React.cloneElement"
      }), " 这样的命令式 VDOM API 在 Solid 中没有等价物。与其直接创建或修改 DOM 元素，不如以声明的方式表达您的意图。"]
    }), "\n", jsxs(_components.h2, {
      id: "vue",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue",
        children: "#"
      }), "Vue"]
    }), "\n", jsx(_components.p, {
      children: "Solid 在设计方面并没有特别受到 Vue 的影响，但它们在方法上来讲是可以进行比较的。他们都在响应式系统中使用 Proxy，并能基于读取的自动跟踪。但这就是所有的相似之处。Vue 的细粒度依赖检测只是提供给一个细粒度的虚拟 DOM 和组件系统，而 Solid 将其粒度保持在它的直接 DOM 更新上。"
    }), "\n", jsx(_components.p, {
      children: "Vue 重视简单，而 Solid 重视透明度。尽管 Vue 与 Vue 3 的新方向更符合 Solid 所采用的方法。这些库可能会随着时间的推移更加一致，这取决于它们如何继续发展。"
    }), "\n", jsxs(_components.h4, {
      id: "迁移建议-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#迁移建议-1",
        children: "#"
      }), "迁移建议："]
    }), "\n", jsxs(_components.p, {
      children: ["作为另一个现代响应式库的 Vue 3， 迁移起来你应该会感觉很熟悉。Solid 的组件非常类似于在 Vue 的 ", jsx(_components.code, {
        children: "setup"
      }), " 函数末尾标记模板。小心地同函数来计算覆盖状态推导。响应性无处不在。Solid 的代理有意设置为只读。在你尝试之前不要批评它。"]
    }), "\n", jsxs(_components.h2, {
      id: "svelte",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#svelte",
        children: "#"
      }), "Svelte"]
    }), "\n", jsx(_components.p, {
      children: "Svelte 开创了 Solid 在一定程度上也采用的预编译消失型框架。这两个库都是真正的响应式，可以生成非常小的执行代码包，尽管 Svelte 是小型 demo 的赢家。Solid 需要在其声明中更加明确，更少依赖编译器的隐式分析，但这正是 Solid 卓越性能的一部分。Solid 还在运行时保留了更多东西，这在更大的应用程序中可以更好地扩展。Solid 的 RealWorld 演示实现比 Svelte 的小 25%。"
    }), "\n", jsx(_components.p, {
      children: "这两个库都旨在帮助他们的开发人员编写更少的代码，但方法却完全不同。Svelte 3 专注于优化处理本地化更改的易用性，重点是普通对象交互和双向绑定。相比之下，Solid 通过故意采用 CQRS 和不可变接口来专注于数据流。通过功能模板组合，在许多情况下，Solid 允许开发人员编写比 Svelte 更少的代码，尽管 Svelte 的模板语法绝对更简洁。"
    }), "\n", jsxs(_components.h4, {
      id: "迁移建议-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#迁移建议-2",
        children: "#"
      }), "迁移建议："]
    }), "\n", jsx(_components.p, {
      children: "开发体验非常不同，虽然有些东西是相似的，但这是一种非常不同的体验。Solid 中的组件消耗低，所以不要担心拥有更多的组件。"
    }), "\n", jsxs(_components.h2, {
      id: "knockoutjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#knockoutjs",
        children: "#"
      }), "Knockout.js"]
    }), "\n", jsx(_components.p, {
      children: "这个库的存在归功于 Knockout。将其模型现代化以进行细粒度依赖检测是该项目的动机。Knockout 于 2010 年发布，支持 IE6，而 Solid 的大部分根本不支持 IE。"
    }), "\n", jsx(_components.p, {
      children: "Knockout 的绑定只是在运行时遍历的 HTML 中的字符串。它们取决于克隆上下文（$parent 等...）。而 Solid 使用 JSX 或 JavaScript API 的标签模板字面量来模板化。"
    }), "\n", jsx(_components.p, {
      children: "最大的区别可能是 Solid 的批处理更改方法可确保同步性，而 Knockout 具有使用延迟微任务队列的 deferUpdates。"
    }), "\n", jsxs(_components.h4, {
      id: "迁移建议-3",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#迁移建议-3",
        children: "#"
      }), "迁移建议："]
    }), "\n", jsx(_components.p, {
      children: "如果你习惯了 Knockout，Solid 的 primitive 对你来说可能看起来很奇怪。读/写分离是有意的，而不仅仅是为了让生活更艰难。可以采用状态/动作 (Flux) 心智模型。虽然这些库看起来相似，但它们提倡不同的最佳实践。"
    }), "\n", jsxs(_components.h2, {
      id: "lit--lighterhtml",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lit--lighterhtml",
        children: "#"
      }), "Lit & LighterHTML"]
    }), "\n", jsx(_components.p, {
      children: "这些库非常相似，并且对 Solid 产生了一些影响。大多数情况下，Solid 的编译代码使用非常相似的方法来高效地初始渲染 DOM。克隆模板元素和使用注释占位符是 Solid 和这些库的共同点。"
    }), "\n", jsx(_components.p, {
      children: "最大的区别是，虽然这些库不使用虚拟 DOM，但它们以相同的方式处理渲染，自上而下，需要组件分区以保持正常。相比之下，Solid 使用其细粒度的响应式图仅更新已更改的内容，并且这样做仅在其初始渲染中技术与之雷同。这种方法利用了仅适用于原生 DOM 的初始速度，并且还具有最高性能的更新方法。"
    }), "\n", jsxs(_components.h4, {
      id: "迁移建议-4",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#迁移建议-4",
        children: "#"
      }), "迁移建议："]
    }), "\n", jsxs(_components.p, {
      children: ["这些库非常小，而且很容易在上面构建。但是，请记住，", jsx(_components.code, {
        children: "<MyComp/>"
      }), " 不仅仅是 HTMLElement（数组或函数）。尝试将你的东西保存在 JSX 模板中。提升在大多数情况下都有效，但最好在心理上将其视为渲染库而不是 HTMLElement 工厂。"]
    }), "\n", jsxs(_components.h2, {
      id: "sjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sjs",
        children: "#"
      }), "S.js"]
    }), "\n", jsx(_components.p, {
      children: "这个库对 Solid 的反应式设计影响最大。Solid 在内部使用了 S.js 几年，直到特征需求使它们走上了不同的道路。S.js 是迄今为止最高效的响应式库之一。它像数字电路一样对所有同步时间步长进行建模，并确保一致性，而无需执行诸如 MobX 之类的库中的许多更复杂的机制。Solid 的反应性归根结底是 S 和 MobX 之间的一种混合。这使它比大多数反应式库（Knockout、MobX、Vue）具有更高的性能，同时为开发人员保留了易于使用的心智模型。S.js 最终仍然是性能更高的反应式库，尽管除了最严厉的综合基准测试之外，差异几乎不明显。"
    }), "\n", jsxs(_components.h2, {
      id: "rxjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rxjs",
        children: "#"
      }), "RxJS"]
    }), "\n", jsx(_components.p, {
      children: "RxJS 是一个响应式库。虽然 Solid 对 Observable 数据有类似的想法，但它有着许多观察者模式不同的应用。虽然 Signal 就像一个 Observable 的受限形式（只有 next），但自动依赖检测的模式取代了 RxJS 的一百个左右的操作符。Solid 有能力采用这种方法，事实上，该库的早期版本也包含类似的运算符，但在大多数情况下，在计算中编写自己的转换逻辑更为直接。在 Observable 是冷启动、单播和基于推送的情况下，客户端上的许多情况都是热启动和多播，这也是 Solid 的默认行为。"
    }), "\n", jsxs(_components.h2, {
      id: "其他",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#其他",
        children: "#"
      }), "其他"]
    }), "\n", jsx(_components.p, {
      children: "Angular 和其他一些流行的库在这个比较中明显缺失。缺乏对这些库的使用经验会妨碍进行任何充分的比较。一般来说，Solid 与较大的框架几乎没有共同之处，而且很难直接比较它们。"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=comparison-b67cb737.js.map
