grapesjs 中 init() 和 onRender() 生命周期挂钩之间的区别？

Question

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

正如医生所说：

Local hook: view.init() method, executed once the view of the component is initiliazed

Local hook: view.onRender() method, executed once the component is rendered on the canvas

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

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

Answer 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 returns DOM中元素的高度。如果元素不在 DOM 中，它不会计算元素的高度。 HTML 元素的许多属性和函数与此相关。

如果您希望挂钩在组件初始化后立即执行而不等待渲染，请使用 init。

这对设置事件侦听器很有帮助。如果您在 onRender 中设置事件侦听器，则不会捕获在 init 之后和 onRender 之前触发的任何事件。

如果您的钩子中的代码不需要在组件初始化后立即调用，并且不依赖于 DOM 中的元素，那么您选择哪个并不重要选择。在大多数情况下，这些事件将相隔几毫秒。

不过我通常会倾向于 init，这样钩子会尽快执行并且不会在渲染出现问题时等待。

grapesjs 中 init() 和 onRender() 生命周期挂钩之间的区别？

Difference between init() and onRender() lifecycle hooks in grapesjs?

grapesjs