Функция render() — что такое аргумент h

Published in

devSchacht

2 min readJun 12, 2018

Перевод статьи Sarah Drasner: What does the ‘h’ stand for in Vue’s render method?. Опубликовано с разрешения автора.

Если вы когда-либо работали с фреймворком Vue.js, то вам приходилось сталкиваться в файле main.js с подобным способом рендеринга приложения:

new Vue({
  render: h => h(App)
}).$mount('#app')

В последней версии консольной утилиты Vue CLI 3 такой способ является способом по умолчанию.

Другим возможным случаем, когда вам приходилось сталкиваться с функцией рендеринга render(), является использование синтаксического расширения JSX в локальном компоненте Vue-приложения:

Vue.component('jsx-example', {
  render (h) {
    return <div id="foo">bar</div>
  }
})

В обоих случаях у вас мог возникнуть вопрос — что такое h и для чего оно предназначено?

Если кратко — h является сокращением от hyperscript. Это название является (в свою очередь) сокращением для Hypertext Markup Language.

Такое имя используется потому, что при работе с Vue-приложением мы фактически имеем дело со скриптом, результатом работы которого является виртуальное DOM-дерево.

Использование подобного сокращения также встречается в официальной документации других JavaScript-фреймворков. Например, в документации Cycle.js есть определение h — The hyperscript function h().

Из официальной документации Vue.js:

Сокращение createElement до h — распространённое соглашение в экосистеме Vue и обязательное для использования JSX. В случае отсутствия h в области видимости, приложение выбросит ошибку.

В одном из ишью создатель фреймворка Vue.js Эван Ю (Evan You) так объясняет, что такое h:

Термин hyperscript можно объяснить так — это “скрипт, который генерирует HTML-структуру”

Сокращение h используется при написании кода — так быстрее и легче. Более подробно это сокращение также объясняется Эваном в Advanced Vue Workshop — курсов для фронтенд-разработчиков Frontend Masters.

Про сокращение h можно думать как о более краткой форме функции createElement. Например, полная форма функции createElement представлена ниже:

render: function (createElement) {
  return createElement(App);
}

Если заменить createElement на h, то получим более сокращенный вариант этой функции:

render: function (h) {
  return h(App);
}

… который можно сократить еще больше при помощи возможностей ES6:

render: h => h (App)

Vue-версия функции render() принимает три аргумента:

render(h) {
  return h('div', {}, [...])
}

первый аргумент — это тип элемента (в примере представлен div);
второй аргумент — это объект данных (здесь можно передать свойства, атрибуты, классы или стили);
третий аргумент — это массив дочерних Node-узлов; здесь можно размещать вложенные вызовы функции createElement и вернуть обратно дерево виртуальных DOM-узлов;

Термин hyperscript может вводить в заблуждение в некоторых случаях, так как это имя JavaScript-библиотеки hyperscript, у которой есть одноименная экосистема. В нашем конкретном случае речь не идет об этих сущностях.

Надеюсь, статья оказалась полезной для тех читателей, которые задавались подобным вопросом.

Функция render() — что такое аргумент h

Written by Valery Semenenko