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上附加一个事件侦听器，哪种方法更适合执行此操作？

通常，这两种方法有什么区别？在什么情况下应该使用它们？