Главная » Архив меток: React (страница 5)

Архив меток: React

Руководство по пользовательским хукам React с MutationObserver

От автора: с появлением React Hooks количество совместно используемого кода в кодовых базах React резко возросло. Поскольку хуки — это тонкие API-интерфейсы поверх React, разработчики могут сотрудничать, прикрепляя повторно используемое поведение к компонентам и разделяя это поведение на более мелкие модули. Хотя это похоже на то, как разработчики JavaScript абстрагируют бизнес-логику в модулях ванилла JavaScript, хуки предоставляют больше, чем просто ...

Читать далее »

Путь к увеличению производительности приложения на React в 10 раз

От автора: когда-либо получали ошибку «Aw! Snap» в вашем приложении? Пытались это решить? Вы просто погуглили и не нашли ничего, кроме статьи о ошибках chrome? Как правило, простое обновление страницы поможет вашему приложению снова запускаться. Год назад в Technogise у меня появилась возможность поработать над тяжелым фронт-энд приложением ReactJS с множеством функций. Мы унаследовали эту кодовую базу, внесли в нее ...

Читать далее »

Динамическая и статическая маршрутизация в React

От автора: маршрутизация — это тема, с которой большинство из нас знакомо. Однако фреймворки SPA и библиотеки маршрутизации используют различные методы. Два таких подхода — статическая и динамическая маршрутизация. Такие фреймворки, как Angular, Ember и библиотека React Router (в прошлом) поддерживали статическую маршрутизацию. Но недавно React Router представил динамическую маршрутизацию для устранения некоторых основных ограничений статической маршрутизации. Как разработчики, мы ...

Читать далее »

Использование форм в React

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

Читать далее »

Полное руководство по виртуальной DOM React

От автора: борьба с бесполезными манипуляциями с DOM, согласование и алгоритм различий. Реальная DOM Перво-наперво, DOM означает «объектную модель документа». Простыми словами DOM представляет пользовательский интерфейс вашего приложения. Каждый раз, когда происходит изменение состояния пользовательского интерфейса вашего приложения, DOM обновляется, чтобы представить это изменение. Теперь загвоздка заключается в том, что частые манипуляции с DOM влияют на производительность, делая ее медленной. ...

Читать далее »

Что такое React Hooks и какие проблемы они решают

От автора: при работе с React — и до выпуска хуков в версии 16.8 — всегда была возможность создавать компоненты тремя разными способами в зависимости от ваших потребностей. 1. Элементарные компоненты — эти компоненты являются простейшими, они характеризуются тем, что являются простыми переменными, которые хранят определенное выражение JSX, поэтому они не получают свойств и не имеют состояния, хотя они могут ...

Читать далее »

React, TypeScript и TDD

От автора: ReactJS очень популярен и поэтому широко поддерживается. TypeScript становится все более популярным и поэтому все более широко поддерживается. А если они вместе? Становится намного лучше. Они оба в контексте разработки через тестирование в сочетании с интеллектуальными инструментами? Почему разработка через тестирование? Разработка через тестирование, или TDD, позиционируется как способ выполнить дополнительную работу заранее, чтобы улучшить качество и сэкономить ...

Читать далее »

Создание To-Do List в React с помощью Redux Toolkit в TypeScript

От автора: сегодня мы узнаем, как составить список дел с помощью Redux. Redux — популярная библиотека управления состоянием, особенно в сочетании с React. Возьмем Redux Toolkit. Redux Toolkit значительно сокращает объем кода Redux, который нам придется писать, и значительно улучшает опыт разработки, как вы скоро увидите. Итак, без лишних слов, давайте погрузимся в создание нашего списка дел. Прежде чем сделаем ...

Читать далее »

Как создать свой первый React Hook от начала до конца

От автора: в этой статье давайте рассмотрим, как от начала до конца создать собственный React hook, который позволяет пользователям копировать фрагменты кода или любой другой текст в приложении. Какую функцию мы хотим добавить? На моем веб-сайте reedbarger.com я разрешаю пользователям копировать код из моих статей с помощью пакета под названием react-copy-to-clipboard. Пользователь просто наводит курсор на фрагмент, нажимает кнопку буфера ...

Читать далее »

Простые советы по написанию чистых компонентов React

От автора: в этом посте давайте рассмотрим несколько простых советов, которые помогут вам писать более чистые компоненты React и лучше масштабировать проект. Избегайте передачи свойств c помощью оператора разделения Давайте сначала начнем с антипаттерна, которого вам следует избегать. Если нет конкретной и обоснованной причины, чтобы сделать это, вы должны избегать прохождения свойств вниз дерева компонентов, используя оператор разделения, например, так: ...

Читать далее »