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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Рендеринг",
  "children": [{
    "depth": 2,
    "value": "Компиляция JSX",
    "children": []
  }, {
    "depth": 2,
    "value": "Атрибуты и Пропсы",
    "children": []
  }, {
    "depth": 2,
    "value": "Главный компонент",
    "children": []
  }, {
    "depth": 2,
    "value": "Компоненты",
    "children": []
  }, {
    "depth": 2,
    "value": "Пропсы",
    "children": []
  }, {
    "depth": 2,
    "value": "Дочерние элементы",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    strong: "strong"
  }, 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.code, {
        children: "JSX"
      }), ", теговые шаблонные литералы и вариант Solid ", jsx(_components.code, {
        children: "HyperScript"
      }), ", хотя JSX является преобладающей формой."]
    }), "\n", jsx(_components.p, {
      children: "Почему JSX - отличный DSL для компиляции? Он имеет четкий синтаксис, поддерживает TypeScript, работает с Babel и поддерживает другие инструменты, такие как подсветка кода и Prettier. Было бы глупо не использовать инструмент, который, по сути, дает нам все это бесплатно. В качестве скомпилированного решения он обеспечивает отличный DX. Зачем бороться с настраиваемыми синтаксическими DSL, если вы можете использовать так широко поддерживаемый?"
    }), "\n", jsxs(_components.h2, {
      id: "компиляция-jsx",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#компиляция-jsx",
        children: "#"
      }), "Компиляция JSX"]
    }), "\n", jsx(_components.p, {
      children: "Рендеринг включает в себя предварительную компиляцию шаблонов JSX в оптимизированный нативный JS код. Код JSX строит:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Шаблонные элементы DOM, которые клонируются при каждом создании экземпляра."
      }), "\n", jsx(_components.li, {
        children: "Серия ссылочных деклараций с использованием только firstChild и nextSibling"
      }), "\n", jsx(_components.li, {
        children: "Вычисления для обновления элементов."
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["Этот подход является более производительным и создает меньше кода, чем создание каждого элемента один за другим с помощью ", jsx(_components.code, {
        children: "document.createElement"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "атрибуты-и-пропсы",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#атрибуты-и-пропсы",
        children: "#"
      }), "Атрибуты и ", jsx(_components.code, {
        children: "Пропсы"
      })]
    }), "\n", jsx(_components.p, {
      children: "Solid старается максимально отразить соглашения HTML, включая нечувствительность к регистру атрибутов."
    }), "\n", jsxs(_components.p, {
      children: ["Большинство атрибутов в элементах DOM выглядят так же в нашем JSX. Статические значения встроены прямо в клонируемый шаблон. Есть ряд исключений, таких как ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), ", которые обеспечивают дополнительную функциональность."]
    }), "\n", jsxs(_components.p, {
      children: ["Однако ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/Web_Components#%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%8B",
        children: "пользовательские элементы"
      }), " (за исключением встроенных модулей) по умолчанию принимают ", jsx(_components.code, {
        children: "пропсы"
      }), ". Это необходимо для обработки более сложных типов данных. Он выполняет это преобразование с помощью стандартных имен атрибутов в ", jsx(_components.code, {
        children: "snake-case"
      }), ", например ", jsx(_components.code, {
        children: "some-attr"
      }), " в ", jsx(_components.code, {
        children: "someAttr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Мы можем управлять этим поведением напрямую с помощью ", jsx(_components.code, {
        children: "директив"
      }), ". Вы можете принудительно использовать атрибут с помощью ", jsx(_components.code, {
        children: "attr:"
      }), "или prop с ", jsx(_components.code, {
        children: "prop:"
      })]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<my-element ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "UniqACC"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":title={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "title"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Заметка:"
        }), " Статические атрибуты создаются как часть клонируемого шаблона html. Зафиксированные и динамические выражения применяются впоследствии в порядке привязки JSX. Хотя это нормально для большинства элементов DOM, есть некоторые, например элементы ввода с ", jsx(_components.code, {
          children: "type='range'"
        }), ", где порядок имеет значение. Помните об этом при связывании элементов."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "главный-компонент",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#главный-компонент",
        children: "#"
      }), "Главный компонент"]
    }), "\n", jsxs(_components.p, {
      children: ["Самый простой способ встроить Solid в DOM это - импортировать рендер из ", jsx(_components.code, {
        children: "solid-js/web"
      }), ". ", jsx(_components.code, {
        children: "render"
      }), " принимает функцию в качестве первого аргумента и контейнер для встраивания в качестве второго и возвращает метод удаления. Этот рендеринг автоматически создает реактивный корень и обрабатывает рендеринг. Для лучшей производительности используйте элемент без внутренних элементов."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'main'"
        }), "))\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Важно"
        }), " Первый аргумент должен быть функцией. В противном случае мы не сможем должным образом отслеживать и планировать работу реактивной системы. Это простое упущение приведет к тому, что ваши эффекты не будут работать."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "компоненты",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#компоненты",
        children: "#"
      }), "Компоненты"]
    }), "\n", jsxs(_components.p, {
      children: ["Компоненты в Solid - это просто функции в регистре паскаля(PascalCase). Их первый аргумент - это ", jsx(_components.code, {
        children: "объект props"
      }), ". Компоненты возвращают реальные узлы DOM."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'Hello'"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Джон", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n)\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = props => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n)\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Поскольку все узлы JSX являются фактическими узлами DOM, единственная обязанность компонентов вашего компонента - добавить их в DOM."
    }), "\n", jsxs(_components.h2, {
      id: "пропсы",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#пропсы",
        children: "#"
      }), jsx(_components.code, {
        children: "Пропсы"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Подобно React, Vue, Angular и другим фреймворкам, Solid позволяет вам определять свойства ваших компонентов для передачи данных дочерним компонентам. Здесь родитель передает строку «Hello» компоненту ", jsx(_components.code, {
        children: "Label"
      }), " через свойство ", jsx(_components.code, {
        children: "greeting"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'Hello'"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n)\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["В приведенном выше примере значение, установленное для ", jsx(_components.code, {
        children: "greeting"
      }), ", является статическим, но мы также можем установить динамические значения:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [greeting, setGreeting] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'Hello'"
        }), ")\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{greeting()}"
            }), ">"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\n  )\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Компоненты могут получить доступ к свойствам, переданным им через аргумент ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = props => (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n    {props.children}\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\n)\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["В отличие от некоторых других фреймворков, вы не можете использовать деструктуризацию объекта в свойствах компонента. Это связано с тем, что объект ", jsx(_components.code, {
        children: "props"
      }), " за кулисами полагается на геттеры объекта для ленивого извлечения значений. Использование деструктурирования объекта нарушает реактивность ", jsx(_components.code, {
        children: "props"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "В этом примере показан «правильный» способ доступа к пропсам в Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Здесь `props.name` обновится"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = props => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "В этом примере показан неправильный способ доступа к реквизитам в Solid:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Здесь `props.name` не будет обновляться (т.е. не будет реагировать), так как он деструктурирован в `name`"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "{ name }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Хотя объект props выглядит как обычный объект, когда вы его используете (и пользователи TypeScript заметят, что он типирован как обычный объект), на самом деле он является реактивным - чем-то похожим на Signal. Это имеет несколько значений."
    }), "\n", jsx(_components.p, {
      children: "Поскольку в отличие от большинства фреймворков JSX, функциональные компоненты Solid выполняются только один раз (а не каждый цикл рендеринга), следующий пример не будет работать как ожидалось."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), "\n\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"
            }), ">"]
          }), "{value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Form"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [value, setValue] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), ")\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "BasicComponent"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "value"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{value()}"
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'text'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "oninput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{e"
            }), " =>"]
          }), " setValue(e.currentTarget.value)} />\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n  )\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["В этом примере мы, вероятно, хотим, чтобы ", jsx(_components.code, {
        children: "BasicComponent"
      }), " отображал текущее значение, введенное в ", jsx(_components.code, {
        children: "input"
      }), ". Но, напоминаем вам, что функция ", jsx(_components.code, {
        children: "BasicComponent"
      }), " будет выполняться только один раз при первоначальном создании компонента. В это время (при создании) props.value будет равняться пустой строке. Это означает, что ", jsx(_components.code, {
        children: "value"
      }), " в BasicComponent будет преобразовано в значение ", jsx(_components.code, {
        children: "default"
      }), " и никогда не будет обновляться. Пока объект ", jsx(_components.code, {
        children: "props"
      }), " является реактивным, доступ к свойствам в ", jsx(_components.code, {
        children: "const value = props.value || 'default';"
      }), " находится за пределами наблюдаемой области Solid, поэтому он не переоценивается автоматически при изменении свойств."]
    }), "\n", jsx(_components.p, {
      children: "Итак, как мы можем решить нашу проблему?"
    }), "\n", jsxs(_components.p, {
      children: ["Ну, в общем, нам нужно получить доступ к ", jsx(_components.code, {
        children: "props"
      }), " где-нибудь, чтобы Solid мог его наблюдать. Обычно это означает внутри JSX или внутри ", jsx(_components.code, {
        children: "createMemo"
      }), ",", jsx(_components.code, {
        children: "createEffect"
      }), ". Вот одно из решений, которое работает должным образом:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = 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"
            }), ">"]
          }), "{props.value || 'default'}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Пример выше эквивалентен этому:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), "\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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Другой вариант, если это дорогостоящее вычисление, - использовать ", jsx(_components.code, {
        children: "createMemo"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), ")\n\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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Или с помощью помощника:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  props = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), " }, props)\n\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"
            }), ">"]
          }), "{props.value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Напоминаем, что следующие примеры работать ", jsx(_components.strong, {
        children: "не будут"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Плохо"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": valueProp } = props\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), ")\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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Плохо"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = props => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valueProp = prop.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "'default'"
        }), ")\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"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Компоненты Solid являются ключевой частью его производительности. Подход Solid к \"исчезающим\" компонентам стал возможен благодаря ленивой (", jsx(_components.code, {
        children: "lazy"
      }), ") загрузке свойств. Вместо того, чтобы немедленно оценивать выражения опоры и передавать значения, выполнение откладывается до тех пор, пока опора не будет доступна в дочернем элементе. Поступая таким образом, мы откладываем выполнение до последнего момента, обычно прямо в привязках DOM, что увеличивает производительность. Это сглаживает иерархию и устраняет необходимость поддерживать дерево компонентов."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [";", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Component"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "prop1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'static'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "prop2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{state.dynamic}"
            }), " />"]
          })
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Компилируется примерно в:"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Мы отследим тело компонента, чтобы изолировать его и предотвратить дорогостоящие обновления"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "({\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "'static'"
        }), ",\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Это динамическое выражение, мы оборачиваем его геттером"
        }), "\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\n      ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), "\n    },\n  }),\n)\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Чтобы поддерживать реактивность, Solid имеет несколько помощников:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Пропсы c значением по умолчанию"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Smith\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Клонирование пропсов"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " newProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Слияние пропсов"
        }), "\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Разделить пропсы на несколько объектов-пропсов"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, others] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"className\""
        }), "])\n<div {...others} className={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cx"
        }), "(local.", jsx(_components.span, {
          className: "hljs-property",
          children: "className"
        }), ", theme.", jsx(_components.span, {
          className: "hljs-property",
          children: "component"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "дочерние-элементы",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#дочерние-элементы",
        children: "#"
      }), "Дочерние элементы"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid обрабатывает дочерние элементы JSX аналогично React. Один дочерний элемент - это одно значение в props.children, а несколько дочерних элементов обрабатываются через массив значений. Обычно вы передаете их в представление JSX. Однако, если вы хотите взаимодействовать с ними, используйте помощник ", jsx(_components.code, {
        children: "children"
      }), ", который разрешает любые последующие потоки управления и вернет Memo."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Единственный дочерний элемент"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_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-attr",
              children: "class"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"label\""
            }), ">"]
          }), "Hi, { props.children }", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), "Josie", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Несколько дочерних элементов"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "First", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\n  {state.expression}\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          })]
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Пройтись по дочерним элементам"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.children}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Пройтись по дочерним элементами и модифицировать их с помощью помощника"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Помощник `children` запоминает значение и поддерживает промежуточную реактивность"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " memo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " children = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "memo"
        }), "();\n    children.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "c"
          }), ") =>"]
        }), " c.", jsx(_components.span, {
          className: "hljs-property",
          children: "classList"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"list-child\""
        }), "))\n  })\n\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: "ul"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{memo()}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "Важно:"
        }), " Solid обрабатывает дочерние теги как дорогостоящие выражения и оборачивает их как динамические реактивные выражения. Это означает, что они лениво оценивают доступ к ", jsx(_components.code, {
          children: "prop"
        }), ". Будьте осторожны, обращаясь к ним несколько раз или деструктурируя перед тем, как использовать их в представлении. Это связано с тем, что Solid не имеет возможности заранее создавать узлы Virtual DOM, а затем их сравнивать, поэтому вычисление значения этих ", jsx(_components.code, {
          children: "props"
        }), " должно быть ленивым и преднамеренным. Используйте помощник ", jsx(_components.code, {
          children: "children"
        }), ", если хотите, чтобы он запомнил их."]
      }), "\n"]
    })]
  });
}
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=rendering-6446c145.js.map
