React внутри Vue 😱
Всем привет! Хочу рассказать о такой штуке как функциональные компоненты в Vue 3. Благодаря им можно использовать JSX внутри Vue. Однако есть определенные сложности при работе с ними. 1. Реактивность - в случае если мы используем в условиях для отрисовки компонента реактивные переменные (например созданные через ref) необходимо явно указывать что передается именно value, в противном случае компонент не будет перерендкриваться и наши. Условия не сработают, а функции не вызовутся. 2. Пропсы - при передаче пропсов, мы не имеем возможности использовать модификаторы пропсов. 3. Оптимизация - при работе с JSX компонентами, необходимо быть более внимательным в этом вопросе, поскольку они сами по себе во Vue медленей чем обычные компоненты. Но не смотря на эти недостатки функциональные компоненты позволяют реализовать с большим комфортом функционал с динамической отрисовкой, что не может не радовать.
· 22.06.2024
Функционал с динамической отрисовкой отлично реализуется посредством конструкции v-if v-else-if v-else
Или
v-show
Или
component is
Для совсем особенных случаев существует рендер функции h() Не очень понимаю зачем нужен вью, если мы хотим писать на jsx. Ведь для этого есть реакт)
Так при работе без template мы теряем массу оптимизаций компилятора vue.
В теории ваш подход конечно возможен, но какой в нем смысл - честно, не понятно.
ответить
коммент удалён
· 22.06.2024
Согласен, я написал о том что мы теряем в оптимизации, использование jsx лучше сократить, желательно его не использовать. Однако не могу не отметить удобство при работе с некоторыми типами динамической отрисовки
ответить
ответ удалён
· 23.06.2024
А можно пожалуйста пример, если вас не затруднит? Просто никогда с такой потребностью не сталкивался
ответить
ответ удалён
· 23.06.2024
Код конечно я не смогу показать, но у нас в проекте используется jsx компонент для фабрики фильтров. Он отрисовывает либо основные фильтры, расположенные в шапке таблицы, либо дополнительные, расположенные в диалоговом окне. У них разный контейнер, поэтому в зависимости от типа передоваемой структуры отрабатывает один из двух return. Так же на фабрику, которая дает нам фильтр нужного типа (строковый, выпадающий список и т.п.) для удобства используется jsx. Через switch case используются компоненты непосредственно самих полей ввода или выбора значений
ответить
ответ удалён
· 23.06.2024
Интересно. На слух сложно воспринять конечно. Но звучит интересно.
ответить
ответ удалён