ReactJs

Перед созданием приложения React важно избегать нескольких антипаттернов при написании React. В этой статье мы рассмотрим некоторые из этих антипаттернов в React и обсудим, как писать лучший код. Без лишних слов, давайте начнем. Одна из распространенных ошибок, которую допускают новые разработчики React, — это prop drilling. Это процесс передачи props из родительского компонента в его дочерний компонент. Давайте рассмотрим этот пример: Здесь вы можете видеть, что функция приращения передается вниз через несколько слоев компонентов только для того, чтобы быть использованной в компоненте Child...

В жизненном цикле компонента React компонент перерисовывается при обновлении. Это происходит, если обнаружены различия (т. н. difs) между виртуальным DOM React и DOM в браузере, в этом случае компоненты, содержащие difs (и любые дочерние компоненты этих компонентов), перерисовываются в браузере. Если эта концепция вам незнакома или вы хотите освежить в памяти функциональность виртуального DOM React, ознакомьтесь с этой темой отдельно. Хотя эта функциональность является частью того, что делает React...

Сегодня я объясню, как создать собственный React Hook для модального компонента. Модальные компоненты довольно проблемны из-за проблем с доступностью и структурой в React. Модальные элементы имеют наложение на экране, которое имеет более высокий визуальный приоритет, чем все остальные элементы. Если бы мы использовали z-index, он должен был бы быть самым высоким. Однако это плохая практика, поскольку он глубоко вложен, а родительские элементы, находящиеся высоко в дереве, имеют приоритет CSS. Начнем с создания модального компонента React, который будет использовать пользовательский useModal...

React Redux — это официальный слой привязок React UI для Redux, который в настоящее время очень популярен. Он позволяет вашим компонентам React считывать данные из хранилища Redux и отправлять действия в хранилище для обновления состояния. И если вы знакомы с React Redux, вы столкнетесь с путаницей при выборе между connect и useSelector для получения значений из хранилища, и они могут иметь одинаковые результаты. Чтобы было ясно, connect — это компонент высокого порядка, useSelector — это хук. Использование useSelector может сократить шаблонный код и встроить эту логику в сами компоненты...

React имеет много функций, которые постоянно обновляются или создаются время от времени. Это библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов, и вы можете понять, почему она так популярна. Я даже использую ее ежедневно в своих проектах, и когда я думаю, что я понял все, что касается React, я быстро обнаруживаю, что мне еще многому нужно научиться. Что приводит меня к React Hooks. React Hooks был представлен еще в 2018 году на конференции React. Как способ использовать состояние и другие эффекты без необходимости определять класс JavaScript...

Если вы начнете использовать React-Hooks, вашему компоненту в какой-то момент может понадобиться метод жизненного цикла. И вот тогда вы начнете использовать useEffect() (он же Effect Hook). И тут — бум! Вы столкнулись с поведением бесконечного цикла и понятия не имеете, почему, черт возьми, это происходит. Если это произойдет, эта статья объяснит, почему и как это можно предотвратить. Приведенный ниже фрагмент кода является примером использования Effect Hook, но он имеет поведение бесконечного цикла...