Этот блог будет посвящен теме синтаксиса в React, а именно JSX, Hyperscript. Затем я буду развивать эти два метода, вводя помощники Hyperscript.
JSX (Javascript XML)
JSX - это расширение Javascript, обычно используемое в React, чтобы предоставить синтаксический сахар для того, что было бы довольно запутанным синтаксисом с React.
Несмотря на его потенциальные преимущества, есть смешанные чувства по поводу JSX, поскольку он, по сути, объединяет вместе HTML и Javascript. Поскольку я здесь не для того, чтобы убеждать кого-либо использовать JSX или нет, я просто расскажу, чем отличается код в React при использовании JSX, а когда нет.
При использовании JSX в React код конвертируется в Javascript с помощью компиляторов, таких как Babel.
Давайте посмотрим, как выглядит код, когда JSX используется для React:
Этот код отобразит «Это лето действительно жаркое!» Довольно прямолинейно, тем более что все внутри return очень похоже на HTML.
Вот метод, отличный от JSX, с теми же результатами:
Давайте немного разберемся в этом.
React.createElement принимает 3 аргумента: (тип, свойства, дочерние элементы)
Он создаст тип HTML-тега (div), примет любые реквизиты для элемента element, а затем любые дочерние элементы, связанные с элементом (this.props.weather).
Вы можете спросить, почему у нас просто нет '{weather:' hot! '}' В качестве второго параметра в createElement внутри render / return и мы не решаемся написать $ {this.props.weather} как параметр children.
Вообще говоря, вы не хотите передавать реквизиты непосредственно самому типу элемента (div). Вместо этого реквизиты должны перейти к компоненту / классу, где вы можете более явно контролировать, какие реквизиты и где используются.
Вот почему внизу фрагмента вы видите ReactDOM.render, который заботится о передаче реквизитов в класс Weather, а не в div.
Гиперскрипт
Для тех из вас, кто ненавидит использование JSX из-за его HTML-природы, давайте рассмотрим альтернативу JSX: Hyperscript.
Вот пример использования:
Вы заметите, что способ создания HTML-тегов, таких как div или h1, уже сильно отличается.
В приведенном выше примере у вас, по сути, будет родительский элемент div с h1 и h2, заключенными внутри как дочерние элементы.
Также обратите внимание, что вы можете назначить ID или Class тегам HTML с помощью # или. соответственно, следуя соглашениям CSS.
Что касается буквы "h", которая используется для создания элементов, вот параметры:
h(componentOrTag, properties, children)
- componentOrTag - может быть строкой тега ИЛИ компонента React с необязательными именами / идентификаторами классов css.
- properties - объект, содержащий свойства, которые вы хотите установить для элемента.
- children - массив из
h()
дочерних элементов или строка. Это создаст дочерние элементы или текстовый узел соответственно.
Таким образом, Hyperscript предлагает более похожий на Javascript подход к запуску React без необходимости иметь дело с компонентами HTML.
Гиперскрипт-помощники
Помощники гиперсриптов - это расширения npm, которые помогают сократить часть синтаксиса кода в React.
Вспомогательные средства Hyperscript могут использоваться для Hyperscript и JSX.
Взглянем:
Используя Hyperscript-helpers, вы можете определить, какие из элементов / тегов вы хотите использовать, и установить их при необходимости («hyperscript-helpers»). Как вы можете видеть в этом примере, поскольку мы используем теги ‹ul› и ‹li›, они нужны нам вверху.
Сделав это, теперь вы можете использовать помощники гиперкриптов, как показано в нижней части кода, просто используя ul (arguments) или li (arguments) вместо того, чтобы писать их отдельно. внутри как параметры.
Если вы хотите попробовать, все, что вам нужно сделать, это:
npm install hyperscript-helpers
Затем потребуйте необходимые ресурсы в верхней части кода, и все готово.
В заключение, похоже, существует смешанная толпа между использованием JSX и использованием Hyperscript. В конце концов, лучший синтаксис - это тот, который вам удобнее всего, если вы можете решать свои проблемы эффективным и логичным способом, используя любой из имеющихся в вашем распоряжении инструментов.