Действительно ли необходимо создавать и использовать новые пользовательские элементы и веб-компоненты (теги HTML)?

Question

В настоящее время я изучаю Front-end веб-разработку и различие между Vanilla JavaScript, фреймворками и библиотеками (например, React). Теперь я знаком с веб-компонентами для создания новых пользовательских тегов HTML. Насколько я знаю, React создан для той же цели, но когда я посетил веб-сайт Instagram (первый веб-сайт, который использует React, который приходит на ум) и посмотрел на код HTML, я не нашел никаких нестандартных HTML element, по сути, большинство элементов состоит из тегов "div". Если сложный веб-сайт социальной сети, такой как Instagram, не состоит из пользовательских элементов, то кто их использует и почему?

Answer 1

В React все по-другому. Работая с React, вы используете JSX . Это просто синтаксис тега, который не является ни строкой, ни HTML. Под капотом этот синтаксис преобразуется в обычный JavaScript (используя Babel ). Подробнее об этом можно прочитать здесь .

Answer 2

React - совершенно другой зверь, появившийся почти десять лет назад. Он был разработан Facebook, потому что СЛИШКОМ много команд делали СЛИШКОМ много обновлений в одном и том же DOM . Поэтому они придумали виртуальную DOM, в которой все необходимые обновления DOM объединяются перед записью в браузер DOM .

Отлично работает для Facebook . Новые технологии, такие как Custom Elements API и Svelte (Compile, not Transpile), доказали, что это больше не лучшее решение.

Reacts устаревшая технология теперь получает скудные 71% на https://custom-elements-everywhere.com/

React и W3 C Пользовательские элементы не дружат

Потому что элементы Green DOM не отслеживаются React.

И если если вы хотите смешать зеленый и желтый, вам нужно в основном переписать / обернуть каждый компонент в синтаксис React. Потому что React не только делает элементы DOM diff erent, но также выполняет события DOM diff erent.

The future

This makes an interesting future: React and the W3C standard are diverging.

And the W3C standard is defacto set by Browser vendors,
not by the W3C, as we learned from the never implemented ECMAScript 4 saga (1999 - 2008)

Итак, это

Apple (Safari) + Mozilla (FireFox) + Google / Microsoft (Chromium / Chredge) против Facebook (без браузера!)

«проблема» с W3 C состоит в том, что все участники должны согласовать стандарт; вот почему потребовались годы, чтобы Custom Elements API созрел ... и React получил фору

Facebook теперь «владеет» 60% рынка разработчиков ... но эй, У Microsoft было 90% рынка браузеров ... однажды , и Fla sh был установлен почти на каждом устройстве .... один раз

Пользовательские элементы API будут существовать, пока ECMAScript работает в браузере

Это не фреймворк или библиотека! Это языковая конструкция. Не изучать пользовательские элементы - это все равно что сказать:

Я не изучаю набор или карту, я могу делать все с помощью массивов

Старая тирада по адресу: Веб-компоненты - Услуги / не html компоненты

Или, поверьте, опросу переднего плана 2020 года:

Answer 3

Как вы сказали, instagram использует react, который не переносится на веб-компоненты.

react не единственная библиотека на основе компонентов, которая НЕ использует веб-компоненты, есть также ¹: vue.js, Polymer.

Но некоторые другие компоненты, основанные на lib, действительно используют веб-компоненты в качестве своей основы ¹: slim.js, stencil.

Все эти библиотеки можно использовать с веб-компонентами, некоторые даже говорят нам, как это сделать: реагировать , vuejs.

!!! эта часть может рассматриваться как основанная на мнении !!!

AFAIK библиотека, которая решила не использовать веб-компоненты, была создана до того, как API веб-компонентов был завершен, и стоимость переписывания с их использованием слишком велика.

!!! эта часть основана на мнении !!!

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

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

¹ на основе списка настраиваемых элементов, возвращаемых этим скриптом на главной странице каждой библиотеки