React | Разработка приложений

🔥 Хук useCallback – ещё больше оптимизации Благодаря этому хуку единожды создаётся метод и обновляется только тогда, когда меняется какой-то из параметров, которые поместили в качестве элемента массива и передают вторым аргументом – по аналогии с массивами в других хуках. Так мемоизируется метод, и не происходит лишний рендеринг.

📌 Хук useReducer – снова идём сквозь пространство Этот хук позволяет вынести данные из компонентов. У него есть преимущество: вне зависимости от того, как компоненты приложения будут вложены друг в друга, можно отобразить данные в любом компоненте.

⚡ Хук useContext – сквозь пространство Чтобы передать какие-то данные в компонент, можем использовать props. Но есть и альтернативный способ – context. Контекст позволяет передавать данные от родительского компонента к дочернему, минуя промежуточные.

🔥 Встроенные условия if-else с тернарным оператором Есть ещё один способ писать условия прямо в JSX. Вы можете воспользоваться тернарным оператором condition ? true : false Вот как этот метод можно использовать, чтобы отрендерить кусочек текста.

Встроенные условия if с логическим оператором && Вы можете внедрить любое выражение в JSX, заключив его в фигурные скобки. Это правило распространяется и на логический оператор  &&  языка JavaScript, которым можно удобно вставить элемент в зависимости от условия.

Хотите легко и интересно познакомиться с веб-разработкой? Бесплатный марафон «Свидания с JavaScript» от HTML Academy идеально подойдет для этого! За 11 дней вы освоите основы языка, научитесь писать код и потренируетесь на специальных тренажерах. Академия сделала всё возможное, чтобы процесс изучения был легким и увлекательным для вас. Кроме того, во время обучения вы получите подарки. Прошедшим марафон «Свидания с JavaScript» гарантированы скидки на обучающие материалы и щедрый секретный приз. Не упустите свой шанс познакомиться с JavaScript — запишитесь на марафон уже сегодня!

⚡ Обработка событий Обработка событий в React-элементах очень похожа на обработку событий в DOM-элементах. Но есть несколько синтаксических отличий: ✓ события в React именуются в стиле camelCase вместо нижнего регистра. ✓ с JSX вы передаёте функцию как обработчик события вместо строки.

Лучшие практики при создании кастомных хуков При создании кастомных хуков существуют несколько лучших практик, которые помогают сделать ваш код более читаемым, модульным и удобным для использования. В основном, вы должны придерживаться правил и практик, используемых создателями React в отношении своих собственных хуков. Используйте префикс use в названии хука. Кастомный хук должен начинаться с префикса use в своем названии, чтобы отличать его от обычных компонентов. Например, useFetch или useGoogleMaps. Избегайте прямой работы с DOM. Кастомные хуки должны избегать прямой работы с DOM элементами. Вместо этого, используйте useRef для управления элементами DOM. Не используйте хуки внутри условных операторов. При использовании хуков внутри условных операторов может возникнуть проблема с их выполнением. Хуки должны вызываться только на верхнем уровне функционального компонента. Если хуки вызываются внутри условных операторов, они могут не выполниться в нужный момент или выполниться несколько раз. Это правило касается и стандартных хуков. Возвращайте массив или объект из кастомного хука. Возвращайте массив или объект из кастомных хуков, как и в стандартных хуках. Если возвращается одно значение, массив или объект необязательны. Если возвращается два значения, массив будет достаточным. Если возвращается больше двух значений, лучше использовать объект. Документируйте свой код. Хорошая документация помогает другим разработчикам понять, как использовать ваш хук и как он работает. Тестируйте ваш код. Как и документирование, тестами часто жертвуют. Но тестирование помогает гарантировать, что ваш код работает должным образом и не приводит к ошибкам.

⚡️ Хук эффекта Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из React-компонента. Мы расцениваем эти операции как «побочные эффекты» (или сокращённо «эффекты»), так как они могут влиять на работу других компонентов и их нельзя выполнить во время рендера. С помощью хука эффекта useEffect вы можете выполнять побочные эффекты из функционального компонента.  К примеру, этот компонент устанавливает заголовок документа после того, как React обновляет DOM.

Основные преимущества использования React: - Эффективность: React использует виртуальный DOM, который позволяет ему более эффективно и быстро обновлять интерфейс приложения, что обеспечивает высокую производительность и снижение нагрузки на сервер. - Модульность: React поддерживает компонентный подход к созданию интерфейса, что позволяет разбивать интерфейс на множество переиспользуемых компонентов. Это делает код более чистым и понятным, а разработку масштабируемым и гибким. - Совместимость: React может использоваться с любыми другими библиотеками и фреймворками, что позволяет разработчикам выбирать свой инструментарий и использовать их совместно с React без ограничений. - Поддержка одностороннего потока данных: Структура React позволяет установить интерфейс приложения так, чтобы данные в нем передавались только в одном направлении. Это помогает избежать ошибок и обеспечить более чистую и предсказуемую работу. - Большое сообщество: React имеет большое сообщество разработчиков, которые создают и распространяют множество полезных инструментов и плагинов. Это делает разработку в React более эффективной и продуктивной.

📌 Хук состояния useState — это хук. Мы вызываем его, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами. Вызов useState возвращает массив с двумя элементами, который содержит: текущее значение состояния и функцию для его обновления. Эту функцию можно использовать где угодно, например, в обработчике событий.

Хуки — позволяет использовать состояние и другие возможности React без написания классов. 📌 Хук состояния ⚡️ Хук эффекта

Общие модули Такие компоненты, как кнопки, поля для ввода и карточки используются повсеместно. Даже если вы не используете структуру, основанную на компонентах, извлекайте их в общие компоненты. Так вы будете видеть, какие общие компоненты используются в вашем приложении, даже без помощи Storybook. Это позволяет избежать дублирования кода. Вы же не хотите, чтобы каждый член вашей команды разрабатывал собственный вариант кнопки? К сожалению, это часто происходит из-за плохой архитектуры приложения.

Компонент высшего порядка Higher-order component (HOC) - это функция, принимающая компонент и возвращающая новый компонент. Это паттерн, производный от композиционной природы React. Мы называем такие компоненты чистыми, поскольку они могут принимать и динамически предоставлять дочерние компоненты, но не меняют и не копируют их поведение.

const EnhancedComponent = higherOrderComponent(WrappedComponent)

HOC обычно используются для: - Обеспечения возможности повторного использования кода, логики, а также для абстрагирования шаблонов. - Отложенного рендеринга. - Абстрагирования и манипуляции состоянием. - Манипуляции пропами.

хук useState Возвращает значение с состоянием и функцию для его обновления. Во время первоначального рендеринга возвращаемое состояние (state) совпадает со значением, переданным в качестве первого аргумента (initialState). Функция setState используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента. setState(newState); Во время последующих повторных рендеров первое значение, возвращаемое useState, всегда будет самым последним состоянием после применения обновлений.

хук useState Возвращает значение с состоянием и функцию для его обновления. Во время первоначального рендеринга возвращаемое состояние (state) совпадает со значением, переданным в качестве первого аргумента (initialState). Функция setState используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента. setState(newState); Во время последующих повторных рендеров первое значение, возвращаемое useState, всегда будет самым последним состоянием после применения обновлений.

key — это специальное зарезервированное свойство в React. Когда элемент создан, React извлекает свойство key и сохраняет этот ключ непосредственно в возвращаемом элементе. Хотя key выглядит как пропс, к нему нельзя обращаться. React автоматически использует key для определения того, какой компонент должен обновиться. Компонент не может узнать о своём ключе. Настоятельно рекомендуется использовать ключи каждый раз, когда вы строите динамические списки.

В React функциональные компоненты являются более простым способом написания компонентов, которые содержат только метод  render  и не имеют собственного состояния. Вместо определения класса, который наследуется от React.Component, мы можем написать функцию, которая принимает на вход props и возвращает то, что должно быть отрендерено. Функциональные компоненты проще писать, чем классы, и многие компоненты могут быть оформлены таким образом.

Есть два подхода к изменению данных. Первый подход — мутировать (изменять) данные, напрямую устанавливая новые значения. Второй подход — заменять данные новой копией, которая содержит изменения. Конечный результат будет тот же, но без мутации (т.е. изменения) исходных данных напрямую.