mount(root, component)

Описание

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

var state = {
  count: 0,
  inc: function () {
    state.count++;
  },
};

var Counter = {
  view: function () {
    return m('div', { onclick: state.inc }, state.count);
  },
};

m.mount(document.body, Counter);

Чтобы передать аргументы при монтировании компонента, используйте:

m.mount(element, {
  view: function () {
    return m(Component, attrs);
  },
});

Сигнатура

m.mount(element, Component)

Аргумент	Тип	Обязательный	Описание
element	Element	Да	DOM-элемент, который станет родительским узлом для поддерева.
Component	Component|null	Да	Компонент, который будет отрисован. null размонтирует дерево и очищает внутреннее состояние.
возвращает			Ничего не возвращает.

Как читать сигнатуры

Как это работает

m.mount(element, Component) при вызове отрисовывает компонент в указанном элементе и регистрирует пару (element, Component) в подсистеме перерисовки. Дерево будет перерисовано при ручном или автоматическом запуске перерисовки.

При перерисовке новое vDOM-дерево сравнивается (выполняется операция diff) со старым, и существующее DOM-дерево изменяется только в тех местах, где это необходимо для отражения изменений. Неизмененные DOM-узлы не затрагиваются.

Замена компонента

Вызов mount(element, OtherComponent), где element — это текущая точка монтирования, заменяет ранее смонтированный компонент на OtherComponent.

Размонтирование

Использование m.mount(element, null) на элементе с ранее смонтированным компонентом размонтирует его и очищает внутреннее состояние Mithril.js. Это может быть полезно для предотвращения утечек памяти при удалении root-узла вручную из DOM.

Монтирование без DOM-привязки

В некоторых сложных ситуациях может потребоваться подписка на события и отслеживание перерисовок без отображения чего-либо на экране. Это можно сделать с помощью монтирования без DOM-привязки, созданного простым вызовом m.mount с элементом, который не добавлен в активное DOM-дерево, и помещением всей логики в монтируемый компонент. В компоненте все равно нужен view, но он не должен возвращать ничего полезного, например, null или undefined.

var elem = document.createElement('div');

// Подписаться
m.mount(elem, {
  oncreate: function () {
    // После добавления
  },
  onupdate: function () {
    // При каждой перерисовке
  },
  onremove: function () {
    // Очистить все необходимое
  },

  // Обязательный шаблон
  view: function () {},
});

// Отписаться
m.mount(elem, null);

Не беспокойтесь о других точках монтирования. Поддерживается несколько корней, и они не будут мешать друг другу. Вы даже можете сделать вышеописанное в компоненте при интеграции с другим фреймворком, и это не вызовет проблем.

Соображения производительности

Может показаться неэффективным генерировать дерево vnode при каждой перерисовке, но создание и сравнение структур данных JavaScript значительно менее затратно по сравнению с чтением и изменением DOM.

Обращение к DOM может быть очень затратным по нескольким причинам. Чередование операций чтения и записи может негативно сказаться на производительности, вызывая несколько перерисовок браузера подряд, тогда как сравнение виртуальных DOM-деревьев позволяет объединять записи в одну перерисовку. Кроме того, характеристики производительности различных операций DOM различаются в разных реализациях, и их сложно изучать и оптимизировать для всех браузеров. Например, в некоторых реализациях чтение childNodes.length имеет сложность O(n); в некоторых чтение parentNode вызывает перерисовку и т. д.

В отличие от этого, обход структуры данных JavaScript имеет гораздо более предсказуемый и разумный профиль производительности, и, кроме того, дерево vnode реализовано таким образом, что позволяет современным движкам JavaScript применять агрессивные оптимизации, такие как скрытые классы, для еще большей производительности.

Отличия от m.render

Компонент, отрисованный с помощью m.mount, автоматически перерисовывается в ответ на события, происходящие в представлении, вызовы m.redraw() или вызовы m.request(). Vnodes, отрисованные с помощью m.render(), этого не делают.

m.mount() подходит для разработчиков приложений, интегрирующих виджеты Mithril.js в существующие кодовые базы, где маршрутизация осуществляется другой библиотекой или фреймворком, при этом используя преимущества автоматической перерисовки Mithril.js.

m.render() подходит для авторов библиотек, которые хотят вручную управлять рендерингом (например, при подключении к стороннему маршрутизатору или использовании сторонних библиотек уровня данных, таких как Redux).