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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Часто задаваемые вопросы",
  "children": [{
    "depth": 3,
    "value": "1. JSX без VDOM? Это что, вейпорвейв? Я слышал, что это невозможно от авторов других фреймворков.",
    "children": []
  }, {
    "depth": 3,
    "value": "2. Почему Solid такой производительный?",
    "children": []
  }, {
    "depth": 3,
    "value": "3. Существует ли React-Compat?",
    "children": []
  }, {
    "depth": 3,
    "value": "4. Почему не работает деструктуризация? Я понял, что могу исправить это, заключив весь компонент в функцию.",
    "children": []
  }, {
    "depth": 3,
    "value": "5. Можете ли вы добавить поддержку классовых компонентов? Я считаю, что о жизненных циклах легче рассуждать.",
    "children": []
  }, {
    "depth": 3,
    "value": "6. Мне действительно не нравится JSX, есть ли шанс на Template DSL? О, я вижу, у вас есть теговые шаблонные литералы/HyperScript. Может, я воспользуюсь этими ...",
    "children": []
  }, {
    "depth": 3,
    "value": "7. Когда использовать Signal, а когда Store? Почему они разные?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Почему я не могу просто присвоить значение Store, как я могу это сделать в Vue. Svelte или MobX? Где двусторонняя привязка?",
    "children": []
  }, {
    "depth": 3,
    "value": "9. Могу ли я самостоятельно использовать реактивность Solid?",
    "children": []
  }, {
    "depth": 3,
    "value": "10. Есть ли у Solid библиотека типа Next.js или Material Components?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "часто-задаваемые-вопросы",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#часто-задаваемые-вопросы",
        children: "#"
      }), "Часто задаваемые вопросы"]
    }), "\n", jsxs(_components.h3, {
      id: "1-jsx-без-vdom-это-что-вейпорвейв-я-слышал-что-это-невозможно-от-авторов-других-фреймворков",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-jsx-без-vdom-это-что-вейпорвейв-я-слышал-что-это-невозможно-от-авторов-других-фреймворков",
        children: "#"
      }), "1. JSX без VDOM? Это что, вейпорвейв? Я слышал, что это невозможно от авторов других фреймворков."]
    }), "\n", jsx(_components.p, {
      children: "Это возможно, когда у вас нет модели обновления React. JSX - это всего лишь шаблонный DSL, как и любой другой. Просто в некоторых моментах более гибкий. Анализ произвольного JavaScript кода может быть сложной задачей, но ничем не отличается от поддержки spread-операторов. Так что нет, это не вейпорвейв, а подход, который оказался одним из самых эффективных."
    }), "\n", jsxs(_components.p, {
      children: ["Главным плюсом JSX заключается в его расширяемости. Мы создали компилятор, работающий на вас, который даст вам оптимальные обновления DOM. Вы спросите: есть ли у этого своя цена? Если не считать различия в том, как работают реактивные примитивы, то скорее всего нет! Вы можете писать многие компоненты так же, как вы писали их в React, например, используя подходы вроде ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/render-props.html",
        children: "рендер-пропсов"
      }), " или ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/higher-order-components.html",
        children: "компонентов высшего порядка"
      }), ", наряду с вашими реактивными хуками. Не нравится, как работает поток управления Solid? Вы можете написать свой!"]
    }), "\n", jsxs(_components.h3, {
      id: "2-почему-solid-такой-производительный",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-почему-solid-такой-производительный",
        children: "#"
      }), "2. Почему Solid такой производительный?"]
    }), "\n", jsx(_components.p, {
      children: "Так хотелось бы указать что-то одно, но на самом деле это комбинация многих решений дизайна:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Явная реактивность. Отслеживаются только те вещи, которые должны быть реактивными."
      }), "\n", jsx(_components.li, {
        children: "Компиляция с учетом первоначального создания. Solid использует эвристику, чтобы уменьшить количество выполняемых вычислений, но сохранить ключевые обновления детализированными и производительными."
      }), "\n", jsx(_components.li, {
        children: "Реактивные выражения - это просто функции. Это позволяет использовать «исчезающие компоненты» с ленивой оценкой свойств. Удаляя ненужные оболочки и накладные расходы на синхронизацию."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "В настоящее время эти уникальные методы в сочетании дают Solid преимущество над конкурентами."
    }), "\n", jsxs(_components.h3, {
      id: "3-существует-ли-react-compat",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-существует-ли-react-compat",
        children: "#"
      }), "3. Существует ли React-Compat?"]
    }), "\n", jsx(_components.p, {
      children: "Нет. И, вероятно, никогда не будет существовать. Хотя API-интерфейсы похожи, и компоненты часто можно перемещать с небольшими изменениями, модель обновления принципиально отличается. Компоненты React визуализируются снова и снова, поэтому код за пределами хуков работает совсем по-другому. Замыкания и правила хуков не только не нужны, их можно использовать способами, которые здесь не работают."
    }), "\n", jsx(_components.p, {
      children: "В будущем вполне возможна, например, поддержка Vue-Compat, хотя на данный момент планов реализации нет."
    }), "\n", jsxs(_components.h3, {
      id: "4-почему-не-работает-деструктуризация-я-понял-что-могу-исправить-это-заключив-весь-компонент-в-функцию",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-почему-не-работает-деструктуризация-я-понял-что-могу-исправить-это-заключив-весь-компонент-в-функцию",
        children: "#"
      }), "4. Почему не работает деструктуризация? Я понял, что могу исправить это, заключив весь компонент в функцию."]
    }), "\n", jsxs(_components.p, {
      children: ["Реактивность возникает при доступе к свойствам объектов Prop и Store. Вы можете использовать деструктуризацию внутри привязки (", jsx(_components.code, {
        children: "binding"
      }), ") или реактивного вычисления (", jsx(_components.code, {
        children: "reactive computation"
      }), "), но при использовании деструктуризации вне этих контекстов вы потеряете отслеживание."]
    }), "\n", jsx(_components.p, {
      children: "Однако объединение всего вашего компонента в функцию - это не то, что вы хотите делать безответственно. Solid не имеет VDOM. Таким образом, любое отслеживаемое изменение приведет к повторному запуску всей функции, пересоздавая все заново. Не делайте этого."
    }), "\n", jsxs(_components.h3, {
      id: "5-можете-ли-вы-добавить-поддержку-классовых-компонентов-я-считаю-что-о-жизненных-циклах-легче-рассуждать",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#5-можете-ли-вы-добавить-поддержку-классовых-компонентов-я-считаю-что-о-жизненных-циклах-легче-рассуждать",
        children: "#"
      }), "5. Можете ли вы добавить поддержку классовых компонентов? Я считаю, что о жизненных циклах легче рассуждать."]
    }), "\n", jsx(_components.p, {
      children: "Solid не имеет намерения поддерживать классовые компоненты. Жизненные циклы Solid связаны с планированием реактивной системы и являются искусственными. Я полагаю, вы могли бы сделать из этого класс, но фактически весь код обработчика событий, не связанный с событиями, в основном запускается в конструкторе, включая функцию рендеринга. Это просто дополнительный синтаксис для предлога сделать ваши данные менее детализированными."
    }), "\n", jsx(_components.p, {
      children: "Группируйте данные и их поведение, вместо того, чтобы группировать жизненные циклы. Это лучшая практика реактивности, зарекомендовавшая себя десятилетиями опыта."
    }), "\n", jsxs(_components.h3, {
      id: "6-мне-действительно-не-нравится-jsx-есть-ли-шанс-на-template-dsl-о-я-вижу-у-вас-есть-теговые-шаблонные-литералыhyperscript-может-я-воспользуюсь-этими-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#6-мне-действительно-не-нравится-jsx-есть-ли-шанс-на-template-dsl-о-я-вижу-у-вас-есть-теговые-шаблонные-литералыhyperscript-может-я-воспользуюсь-этими-",
        children: "#"
      }), "6. Мне действительно не нравится JSX, есть ли шанс на Template DSL? О, я вижу, у вас есть теговые шаблонные литералы/HyperScript. Может, я воспользуюсь этими ..."]
    }), "\n", jsxs(_components.p, {
      children: ["Если у вас нет особой причины этого делать, то мы рекомендуем остановиться и задуматься. Мы используем JSX так же, как Svelte использует свои шаблоны, для создания оптимизированных инструкций DOM. Решения вроде ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals#%D1%82%D0%B5%D0%B3%D0%BE%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B_%D0%B8_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%BE%D0%B2",
        children: "теговых шаблонных литералов"
      }), " и HyperScript могут быть действительно впечатляющими сами по себе, но, если у вас нет специфических требований, например необходимость избавиться от сборки (", jsx(_components.code, {
        children: "bundling"
      }), "), то мы советуем использовать JSX. Иначе вы получите больше JS в вашем бандле (", jsx(_components.code, {
        children: "bundle"
      }), "), более низкую производительность и необходимость ручной обертки значений."]
    }), "\n", jsx(_components.p, {
      children: "Приятно иметь варианты, но Solid JSX - действительно лучшее решение. Шаблон DSL также был бы отличным, но у него есть свои ограничения, которые мы получаем JSX совершенно бесплатно: существующие анализаторы кода, подсветка синтаксиса, Prettier, TypeScript и ещё много всего."
    }), "\n", jsx(_components.p, {
      children: "Другие библиотеки добавляли поддержку этих функций, но это потребовало огромных усилий и до сих пор все остается неидеальным и вызывает постоянную головную боль при обслуживании. Выбор JSX это ничто иное, как прагматическая позиция."
    }), "\n", jsxs(_components.h3, {
      id: "7-когда-использовать-signal-а-когда-store-почему-они-разные",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-когда-использовать-signal-а-когда-store-почему-они-разные",
        children: "#"
      }), "7. Когда использовать Signal, а когда Store? Почему они разные?"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "Сторы"
      }), " автоматически оборачивают вложенные значения, что делает его идеальным для сложных структур данных и таких вещей, как модели. Для большинства других вещей ", jsx(_components.code, {
        children: "Сигналы"
      }), " легковесны и прекрасно справляются со своей задачей."]
    }), "\n", jsxs(_components.p, {
      children: ["Как бы нам ни хотелось объединить их в одно целое, но к сожалению, вы не можете проксировать примитивы. Функции - это самый простой интерфейс, и любое реактивное выражение (включая доступ к состоянию) может быть заключено в одно целое, что обеспечит универсальный API. Вы можете называть свои ", jsx(_components.code, {
        children: "Сигналы"
      }), " и состояние по своему усмотрению, и оно остается минимальным. Последнее, что мы хотели бы сделать, это принудительно ввести ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " для конечного пользователя или, что еще хуже, ", jsx(_components.code, {
        children: ".value"
      }), ". По крайней мере, первый может быть назван псевдонимом для краткости, тогда как последний - наименее краткий способ вызова функции."]
    }), "\n", jsxs(_components.h3, {
      id: "8-почему-я-не-могу-просто-присвоить-значение-store-как-я-могу-это-сделать-в-vue-svelte-или-mobx-где-двусторонняя-привязка",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-почему-я-не-могу-просто-присвоить-значение-store-как-я-могу-это-сделать-в-vue-svelte-или-mobx-где-двусторонняя-привязка",
        children: "#"
      }), "8. Почему я не могу просто присвоить значение Store, как я могу это сделать в Vue. Svelte или MobX? Где двусторонняя привязка?"]
    }), "\n", jsxs(_components.p, {
      children: ["Реактивность - мощный, но опасный инструмент. MobX знает об этом и ввел строгий режим и действия, чтобы ограничить, где и когда происходят обновления. В Solid, который имеет дело со всеми деревьями данных в компонентах, стало очевидно, что здесь мы можем кое-чему научиться у React. Вам не нужно быть фактически неизменным (", jsx(_components.code, {
        children: "immutable"
      }), "), если вы предоставляете средства для заключения одного и того же контракта."]
    }), "\n", jsxs(_components.p, {
      children: ["Возможность обновить состояние, возможно, даже более важна, чем решение передать это состояние. Поэтому возможность разделить его, еще раз, очень важна, и это возможно только в том случае, если чтение неизменяемо. Нам также не нужно платить за неизменяемость, если мы все еще можем гранулярно обновлять. К счастью, у нас есть много подобных примеров в виде ", jsx(_components.code, {
        children: "ImmutableJS"
      }), " и ", jsx(_components.code, {
        children: "Immer"
      }), ". По иронии судьбы Solid представляет из себя перевернутую модель ", jsx(_components.code, {
        children: "Immer"
      }), " со своими изменяемыми внутренностями и неизменяемым интерфейсом."]
    }), "\n", jsxs(_components.h3, {
      id: "9-могу-ли-я-самостоятельно-использовать-реактивность-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#9-могу-ли-я-самостоятельно-использовать-реактивность-solid",
        children: "#"
      }), "9. Могу ли я самостоятельно использовать реактивность Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Конечно. Хотя мы не публиковали систему реактивности отдельно, Solid легко установить без компилятора и просто использовать реактивные примитивы. Одним из преимуществ гранулярной реактивности является то, что она не зависит от библиотеки. В этом отношении почти каждая реактивная библиотека работает таким образом. Это то, что вдохновило ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " и лежащую в его основе ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "библиотеку выражений DOM"
      }), " в первую очередь на создание рендерера чисто из реактивной системы."]
    }), "\n", jsxs(_components.p, {
      children: ["Вот несколько примеров, которые стоит попробовать: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), " и даже недавно ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), ". На создание реактивной библиотеки уходит гораздо больше, чем на ее добавление на какой-нибудь рендерер, например ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), ", это хороший способ почувствовать о чем идет речь."]
    }), "\n", jsxs(_components.h3, {
      id: "10-есть-ли-у-solid-библиотека-типа-nextjs-или-material-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#10-есть-ли-у-solid-библиотека-типа-nextjs-или-material-components",
        children: "#"
      }), "10. Есть ли у Solid библиотека типа Next.js или Material Components?"]
    }), "\n", jsxs(_components.p, {
      children: ["Насколько нам известно, нет. Если вы заинтересованы в его создании, мы легко доступны на нашем ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), ", чтобы помочь в его создании. У нас есть всё что необходимо для создания потрясающей экосистемы!"]
    })]
  });
}
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=faq-f4cab8dd.js.map
