var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n\tonMount(async () => {\n\t\tconst res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n\t\tsetPhotos(await res.json());\n\t});\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var markdown = "Solid 中只有少量的生命周期，因为一切的存活销毁都由响应系统控制。响应系统是同步创建和更新的，因此唯一的调度就是将逻辑写到更新结束的 Effect 中。\n\n我们发现处理简单任务的开发者通常不会这么想，所以为了让事情变得更容易一些，我们将非跟踪（从不重新运行）`createEffect` 调用取了一个别名 —— `onMount`。它只是一个 Effect 调用，但你可以放心使用它，一旦所有初始渲染完成，它只会在组件中运行一次。\n\n让我们使用 `onMount` 钩子来获取一些照片：\n\n```js\nonMount(async () => {\n  const res = await fetch(\n    `https://jsonplaceholder.typicode.com/photos?_limit=20`\n  );\n  setPhotos(await res.json());\n});\n```\n\n生命周期仅在浏览器中运行，因此将代码放在 `onMount` 中的好处是在 SSR 期间不在服务器上运行。即使我们在这个例子中进行数据获取，通常我们使用 Solid 的 Resource 来实现真正的服务器/浏览器协调。\n";
var lifecycles_onmount = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { lifecycles_onmount as default, lesson, markdown, solved };
