var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  return <button>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, createEffect } from 'solid-js';\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n  createEffect(() => {\n    console.log(\"The count is now\", count());\n  });\n\n  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;\n}\n\nrender(() => <Counter />, document.getElementById('app'));\n"
		}
	]
};
var markdown = "Signal 是可追踪的值，但它们只是等式的一半。另一半是观察者，也就是计算。最基本的计算称为 Effect，它产生副作用 —— 我们系统的输出。\n\n可以通过从 `solid-js` 导入 `createEffect` 来创建 Effect。`createEffect` 接收一个函数，并监视其执行情况。`createEffect` 会自动订阅在执行期间读取的所有 Signal，并在这些 Signal 值之一发生变化时重新运行该函数。\n\n因此，让我们创建一个 Effect，该 Effect 会在 `count` 更改时重新运行。\n\n```jsx\ncreateEffect(() => {\n  console.log(\"The count is now\", count());\n});\n```\n\n要更新 `count` Signal，我们需要在按钮上绑定一个点击事件监听器。\n\n```jsx\n<button onClick={() => setCount(count() + 1)}>Click Me</button>\n```\n\n现在单击按钮就会输出日志了。这是一个相对简单的示例，但要了解 Solid 的工作原理，你应该想象 JSX 中的每个表达式都可能是一个单独包装的 Effect，它会在其依赖信号发生变化时重新执行。这就是 Solid 中所有渲染的工作方式。从 Solid 的角度来看，`所有渲染都只是响应系统的副作用`。\n\n开发者使用 `createEffect` 创建的 Effect 会在渲染完成后运行，主要用于调度渲染后与 DOM 交互的更新。\n";
var introduction_effects = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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