Grapesjs 中的 init() 和 onRender() 生命周期钩子之间的区别？答案

【问题标题】：Difference between init() and onRender() lifecycle hooks in grapesjs?Grapesjs 中的 init() 和 onRender() 生命周期钩子之间的区别？
【发布时间】：2020-05-29 13:12:18
【问题描述】：

Grapesjs 提供了两个生命周期方法：init() 和 onRender()，我其实对这两个钩子很困惑：

正如医生所说：

本地钩子：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上附加一个事件监听器，哪个更适合做这样的操作？

总的来说，这两种方法有什么区别，我应该在什么情况下使用它们？

【问题讨论】：

标签： grapesjs

【解决方案1】：

如果在钩子执行之前需要 DOM 中的元素，请使用 onRender。

例子：

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，因此钩子会尽快执行，并且不会在渲染出现问题时等待。

【讨论】：