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

var A = {
    doStuff (){}
}

var B = {
    doStuff (){}
}

var C = React.createClass({
    mixins: [A, B]
});
//упс... ошибка, потому что React не может решить какой из doStuff унаследовать

В последние время, AngularJS не критиковал только ленивый и я, за последние пару месяцев, перечитал немало статей с критикой. Одна такая статья завершалась фразой «Я, черт возьми, не понимаю, как Angular может быть настолько популярным, ведь он так плох!»
«А действительно» задумался я «если он такой плохой, то почему же так популярен?» И я, кажется, нашел ответ. Дело в том, что у Angular, как и у jQuery, низкий порог вхождения, он прост и нагляден. Да, несомненно, и в Angular и jQuery можно делать сложные вещи, но большинство людей не использует эти библиотеки таким образом. Что я имею в виду?

Современные JavaScript фреймворки, и ReactJS не исключение, обычно требуют эксклюзивного доступа к DOM и им очень не нравится, когда кто-то без их ведома этот DOM меняет. Проблема в том, что существует огромное количество сторонних библиотек (например, плагины jQuery), которым необходимо в их подконтрольном поддереве что-нибудь да вропнуть, анвропнуть, перенести в другое место и т.д. Обычно в таких случаях мы видим в консольке нечто подобное:



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