Разница между хуками жизненного цикла init () и onRender () в Grapes js? - PullRequest
Новая
       11

Разница между хуками жизненного цикла init () и onRender () в Grapes js?

0 голосов
/ 25 мая 2020

Grapes js предоставляет два метода жизненного цикла: init() и onRender(), я на самом деле довольно запутался с этими двумя крючками:

Как сказал do c:

  • Локальный перехватчик: view.init() метод, выполняемый после инициализации представления компонента
  • Локальный перехватчик: view.onRender() метод, выполняемый после отрисовки компонента на холсте 
init({ model }) {
  // Do something in view on model property change
  this.listenTo(model, 'change:prop', this.handlePropChange);

  // If you attach listeners on outside objects remember to unbind
  // them in `removed` function in order to avoid memory leaks
  this.onDocClick = this.onDocClick.bind(this);
  document.addEventListener('click', this.onDocClick)
},

// Do something with the content once the element is rendered.
// The DOM element is passed as `el` in the argument object,
// but you can access it from any function via `this.el`
onRender({ el }) {
  const btn = document.createElement('button');
  btn.value = '+';
  // This is just an example, AVOID adding events on inner elements,
  // use `events` for these cases
  btn.addEventListener('click', () => {});
  el.appendChild(btn);
},

Например, я могу получить доступ к this.el в обоих методах, чтобы получить элемент dom. если я хочу прикрепить прослушиватель событий к this.el, какой из них больше подходит для выполнения такой операции?

В общем, какая разница между этими двумя методами и в каком сценарии мне их использовать?

1 Ответ

1 голос
/ 29 мая 2020

Используйте onRender, если вам нужен элемент в DOM перед выполнением обработчика.

Пример: 

var el = document.createElement('DIV');
el.style = 'height: 10px';

// logs 0
console.log(el.clientHeight);

document.body.appendChild(el);

// logs 10
console.log(el.clientHeight);

clientHeight возвращает высоту элемента в DOM. Он не вычисляет высоту элемента, если он еще не находится в DOM. Есть много свойств и функций для HTML элементов, для которых это актуально.

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

Это может быть полезно для настройки прослушивателей событий. Если вы настроили прослушиватели событий в onRender, то любые события, которые запускаются после init и до onRender, не будут перехвачены.

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

Я обычно склоняюсь к init, поэтому ловушка выполняется как можно скорее и не дожидается, если есть проблема с рендерингом.

...