Почему пользовательские события предпочтительнее обратных вызовов атрибутов в веб-компонентах?

Question

В веб-компонентах, подобных React, мы отправляем данные, а события - вверх.

В React обычно отправляют событие в дочерний компонент в качестве атрибута. Например:

<CustomComponent handleClick={this.handleClick}></CustomComponent>

Я узнал, что это также возможно сделать с веб-компонентами LitElement:

<custom-component .handleClick=${this.handleClick}></custom-component>

Тем не менее, многие источники, которые я читал, говорят, что используют пользовательское событие из компонента, даже не упоминая обратные вызовы атрибута:

this.dispatchEvent(
    new CustomEvent('some-custom-event', {
        bubbles: true,
        composed: true,
        detail: {
            data: someData,
        },
    })
);

---

Мой вопрос: почему предпочтительнее отправлять пользовательское событие, чемчем отправить обратный вызов веб-компоненту в качестве атрибута? Это соглашение или есть серьезная причина, которую я просто не могу найти?

Answer 1

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

Например, в ситуации, когда обратный вызовЕсли родительский компонент рассматриваемого компонента не реализовал (или не передал) обратный вызов, то возникнет ошибка, когда дочерний компонент попытается использовать его, тогда как в ситуации обработки событий вероятность ошибки будет меньше, еслиparent просто не обрабатывает событие.

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

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