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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Getting Started",
  "children": [{
    "depth": 2,
    "value": "了解 Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "使用 Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "学习 Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid 理念",
    "children": [{
      "depth": 3,
      "value": "1. 声明式数据",
      "children": []
    }, {
      "depth": 3,
      "value": "2. 消失的组件",
      "children": []
    }, {
      "depth": 3,
      "value": "3. 读/写 分离",
      "children": []
    }, {
      "depth": 3,
      "value": "4. 简单胜于容易",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web 组件",
    "children": []
  }, {
    "depth": 2,
    "value": "服务端渲染",
    "children": []
  }, {
    "depth": 2,
    "value": "不使用构建工具",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    strong: "strong",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "getting-started",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#getting-started",
        children: "#"
      }), "Getting Started"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "我们正在开发新文档."
      }), " 您可以在 ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "此处"
      }), " 查看我们的新初学者教程，并加入我们在 ", jsx(_components.a, {
        href: "http://discord.com/invite/solidjs",
        children: "Discord"
      }), " 的频道。"]
    }), "\n", jsxs(_components.h2, {
      id: "了解-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#了解-solid",
        children: "#"
      }), "了解 Solid"]
    }), "\n", jsx(_components.p, {
      children: "有关 Solid 核心概念的快速视频概述，请查看："
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "100 秒了解 Solid"
        })
      }), "\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/J70HXl1KhWE",
          children: "10 分钟了解 Solid 响应性"
        })
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "使用-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#使用-solid",
        children: "#"
      }), "使用 Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["到目前为止，开始使用 Solid 的最简单方法是在线试用。我们在 ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " 上的 REPL 是尝试想法的完美方式。与 ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " 一样，您可以在其中修改任何 ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "我们的示例"
      }), "。"]
    }), "\n", jsxs(_components.p, {
      children: ["或者，您可以通过在终端中运行以下命令来使用我们的 ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates",
        children: "Vite 模板"
      }), "："]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "或者使用 TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["或者您可以在自己的项目中安装依赖项。要将 Solid 与 JSX 一起使用（推荐），您需要安装 ", jsx(_components.code, {
        children: "solid-js"
      }), " NPM 库和 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",
        children: "Solid JSX 编译器"
      }), " Babel 插件："]
    }), "\n", jsx(_components.pre, {
      children: jsx(_components.code, {
        className: "hljs language-sh",
        children: "> npm install solid-js babel-preset-solid\n"
      })
    }), "\n", jsxs(_components.p, {
      children: ["然后将 ", jsx(_components.code, {
        children: "babel-preset-solid"
      }), " 添加到你的 ", jsx(_components.code, {
        children: ".babelrc"
      }), " 中，或者添加到 ", jsx(_components.code, {
        children: "webpack"
      }), " 或 ", jsx(_components.code, {
        children: "rollup"
      }), " 中的 Babel 配置中："]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"presets\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "["
        }), jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: "]"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["对于 TypeScript，将您的 ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " 设置为处理 Solid 的 JSX，如下所示（有关详细信息，请参阅 ", jsx(_components.a, {
        href: "https://www.solidjs.com/guides/typescript",
        children: "TypeScript 指南"
      }), "）："]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "学习-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#学习-solid",
        children: "#"
      }), "学习 Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid 到处都是可组合的小片段，用这些片段用来构建应用块。这些部分主要由许多 API 的函数组成。幸运的是，你无需了解其中的大部分内容即可开始使用。"
    }), "\n", jsx(_components.p, {
      children: "您可以使用两种主要类型的构建块是：组件和响应性 API。"
    }), "\n", jsx(_components.p, {
      children: "组件是接受 props 对象并返回 JSX 元素的函数，包括原生 DOM 元素和其他组件。它们可以用 PascalCase 表示为 JSX 元素："
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "组件是轻量级的，因为它们本身没有状态并且没有实例。相反，它们充当 DOM 元素和响应性 API 的工厂函数。"
    }), "\n", jsx(_components.p, {
      children: "Solid 的细粒度响应性建立在三个核心 API 之上：signal、memo 和 effect。它们共同构成了一个自动跟踪同步引擎，可确保您的视图保持最新。响应式计算采用同步执行的函数包装表达式的形式。"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["您可以了解更多关于 Solid ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "响应性"
      }), " 和 ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "渲染"
      }), " 的信息。"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-理念",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-理念",
        children: "#"
      }), "Solid 理念"]
    }), "\n", jsx(_components.p, {
      children: "Solid 的设计提出了一些可以帮助我们最好地构建网站和应用程序的原则和价值观。当你了解 Solid 背后的哲学时，学习和使用 Solid 会更容易。"
    }), "\n", jsxs(_components.h3, {
      id: "1-声明式数据",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-声明式数据",
        children: "#"
      }), "1. 声明式数据"]
    }), "\n", jsx(_components.p, {
      children: "声明式数据是将数据行为的描述与其声明联系起来的实践。这允许我们通过将数据行为的所有方面打包在一个地方来轻松组合。"
    }), "\n", jsxs(_components.h3, {
      id: "2-消失的组件",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-消失的组件",
        children: "#"
      }), "2. 消失的组件"]
    }), "\n", jsx(_components.p, {
      children: "在不考虑更新的情况下构建组件已经够难的了。Solid 的组件更新是彼此完全独立的。组件函数被调用一次，然后就不再存在。组件的存在是为了组织你的代码，而不是其他。"
    }), "\n", jsxs(_components.h3, {
      id: "3-读写-分离",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-读写-分离",
        children: "#"
      }), "3. 读/写 分离"]
    }), "\n", jsx(_components.p, {
      children: "精确的控制和可预测性有助于打造更好的系统。我们不需要真正的不变性来强制执行单向数据流，只需要能够有意识到哪些消费者可能会写，哪些可能不会。"
    }), "\n", jsxs(_components.h3, {
      id: "4-简单胜于容易",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-简单胜于容易",
        children: "#"
      }), "4. 简单胜于容易"]
    }), "\n", jsx(_components.p, {
      children: "细粒度响应性教会我们：明确且一致的约定即使需要更多努力也是值得的。且有必要提供最少的工具作为构建的基础。"
    }), "\n", jsxs(_components.h2, {
      id: "web-组件",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-组件",
        children: "#"
      }), "Web 组件"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid 生而将 Web 组件作为一等公民。随着时间的推移，它的设计不断发展，目标也发生了变化。然而，Solid 仍然是编写 Web 组件的好选择。", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " 允许你编写和包装 Solid 的函数组件以生成小型且高性能的 Web 组件。在 Solid 应用程序中，Solid Element 仍然能够利用 Solid 的 Context API，并且 Solid 的 Portals 支持隔离样式的 Shadow DOM 。"]
    }), "\n", jsxs(_components.h2, {
      id: "服务端渲染",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#服务端渲染",
        children: "#"
      }), "服务端渲染"]
    }), "\n", jsx(_components.p, {
      children: "Solid 拥有动态的服务器端渲染解决方案，可实现真正的同构开发体验。通过使用我们的 Resource primitive，很容易进行异步数据请求，更重要的是，我们也可以在客户端和浏览器之间自动序列化和同步。"
    }), "\n", jsxs(_components.p, {
      children: ["由于 Solid 支持服务器上的异步和流式渲染，因此你可以以一种方式编写代码并让它在服务器上执行。这个特性类似 ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), "，并且代码分割特性也适用于 Solid。"]
    }), "\n", jsxs(_components.p, {
      children: ["更多信息，请阅读 ", jsx(_components.a, {
        href: "#ssr",
        children: "服务端渲染指南"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "不使用构建工具",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#不使用构建工具",
        children: "#"
      }), "不使用构建工具"]
    }), "\n", jsxs(_components.p, {
      children: ["如果您需要或喜欢在非编译环境中使用 Solid，例如纯 HTML 文件、", jsx(_components.a, {
        href: "https://codepen.io",
        children: "https://codepen.io"
      }), " 等，您可以在普通的 JavaScript 中使用 ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/html",
        children: [jsx(_components.code, {
          children: "html``"
        }), " Tagged Template Literals"]
      }), " 或 ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/h",
        children: ["HyperScript ", jsx(_components.code, {
          children: "h()"
        }), " functions"]
      }), "，而不是 Solid 的编译时优化的 JSX 语法。"]
    }), "\n", jsxs(_components.p, {
      children: ["您可以使用 ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), " 直接从浏览器运行它们，例如："]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n        ", jsx(_components.span, {
            className: "hljs-comment",
            children: "// or"
          }), "\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "h"
          }), "(", jsx(_components.span, {
            className: "hljs-string",
            children: "\"div\""
          }), ", {}, count);\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "无构建的优势伴随着权衡："
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["表达式必须始终包裹在 getter 函数中，否则它们将不会是响应式的。当 ", jsx(_components.code, {
          children: "first"
        }), " 或 ", jsx(_components.code, {
          children: "last"
        }), " 值更改时，以下内容不会更新，因为在模板内部创建的 effect 内没有访问这些值，因此不会跟踪依赖项：", "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// or"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", "当 ", jsx(_components.code, {
          children: "first"
        }), " 或 ", jsx(_components.code, {
          children: "last"
        }), " 更改时，以下内容将按预期更新，因为模板将从 effect 中的 getter 读取，并且将跟踪依赖项：", "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${() => first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// or"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-function",
              children: "() =>"
            }), " ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", "Solid 的 JSX 没有这个问题，因为它的编译时能力，像 ", jsx(_components.code, {
          children: "<h1>Hello {first() + ' ' + last()}</h1>"
        }), " 这样的表达式将是响应式的。"]
      }), "\n", jsxs(_components.li, {
        children: ["构建时优化不会像 Solid JSX 那样到位，这意味着应用程序启动速度会稍微慢一些，因为每个模板在第一次执行时都会在运行时编译，但对于许多用例来说是难以察觉的。", jsx(_components.code, {
          children: "html``"
        }), " 模板标签启动后的持续速度将与 JSX 相同。", jsx(_components.code, {
          children: "h()"
        }), " 调用将始终具有较慢的持续速度，因为它们无法在执行之前静态分析整个模板。"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["您需要相应的 DOM 表达式库才能使它们与 TypeScript 一起使用。您可以将标记模板文字与 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " 搭配 或 HyperScript 与 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), " 搭配。"]
    })]
  });
}
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=getting-started-a5c03ed0.js.map
