var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n\t\t{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n\t\t{ id: 'z_AbfPXTKms', name: 'Maru' },\n\t\t{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n\t]);\n  \n  return (\n    <ul>\n      <li>\n        <a target=\"_blank\" href=\"\">\n\t\t\t    1: Garfield\n\t\t    </a>\n      </li>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, Index } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n\t\t{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n\t\t{ id: 'z_AbfPXTKms', name: 'Maru' },\n\t\t{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n\t]);\n  \n  return (\n    <ul>\n      <Index each={cats()}>{(cat, i) =>\n        <li>\n          <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n\t\t\t      {i + 1}: {cat().name}\n\t\t      </a>\n        </li>\n      }</Index>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "在某些时候使用引用相等来比较行没有意义。在处理原始值或二维数组时，将值视为键可能会导致很多不必要的渲染。例如，如果我们将一个字符串列表映射到可以编辑每个字段的 `<input>` 字段，对该值的每次更改都会导致 `<input>` 被重新创建，因为它被视为唯一标识符。\n\n在上述情况下，从概念上讲，数组索引是列表的实际键。为此，我们提供 `<Index>` 组件。\n\n`<Index>` 与 `<For>` 具有相似的签名，除了数据项是 \u001cSignal 并且索引是固定的。\n\n```jsx\n<Index each={cats()}>\n  {(cat, i) => (\n    <li>\n      <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat().id}`}>\n        {i + 1}: {cat().name}\n      </a>\n    </li>\n  )}\n</Index>\n```\n";
var flow_index = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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