Ретроспектива моего последнего проекта года 3 - React Context, next/dynamic

Ретроспектива моего последнего проекта в 2022 году - React Context, next/dynamic

React Context

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

Появились инструменты, называемые библиотеками управления состоянием. Redux, Mobx, Recoil, Zustand, Jotai и другие были приняты на вооружение на основе их мощных возможностей, хотя детали немного отличаются. Однако, помимо сторонних библиотек, React также предоставляет собственные функции управления состояниями.

Контекст - Реакция

Я всегда знал об этом, но это первый раз, когда я действительно использовал это функционально в проекте. Он не предназначен для широкого использования, но мое первое впечатление - он лучше, чем я ожидал.

Когда я изучал Redux, я писал на ванильном JavaScript - фактически, я писал на TypeScript, чтобы получить немного практики в TypeScript - и я практиковал React-redux в среде приложений React. Когда я писал код для проектирования магазинов и действий с помощью React Context, я чувствовал себя очень похожим на Redux, который был до этого.

Однако благодаря прекрасно написанной официальной документации по React и относительно более простой структуре, чем у Redux, я чувствовал себя с Recoil так же комфортно, как и при первом изучении.

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

Конечно, React Context не лишен своих преимуществ, и он не идеален для хранения часто обновляемых или изменяющихся данных; для сложных фронтенд-приложений, вероятно, лучше подойдет Redux.

Import dynamic from "next/dynamic"

by James Wiseman on Unsplash

Одной из замечательных особенностей Next.js является динамический импорт. Компоненты или библиотеки, импортированные с помощью этой функции, изначально не включаются в файл пакета JavaScript, который загружает клиент, а импортируются и включаются в файл пакета только при их использовании, что может повысить производительность за счет снижения затрат на загрузку JavaScript для первоначального рендеринга. Как и React.lazy, он поддерживает ленивую загрузку.

const ComponentName = dynamic(
  () => import(
    '../components/componentName',
    { /* options */ }
  )
);

Основное использование такое же, как и выше, но внутри функции импорта dynamic в качестве второго параметра принимается объект с несколькими опциями, и среди опций этого объекта есть loading и ssr.

Опция используется путем назначения JSX-элемента с синтаксисом типа loading: () =><span>Loading...</span> Как и компонент загрузки, который вы назначаете свойству fallback React.Suspense, компонент, который вы указываете в свойстве loading, будет отрисовываться первым до разрешения suspense соответствующего динамически импортируемого компонента, а компонент будет отрисовываться после разрешения suspense.

Опция может быть задана в виде типа boolean, при установке которого в значение false компонент будет загружаться динамически на стороне клиента, предотвращая серверный рендеринг. Мы не использовали его в этом проекте, но в официальной документации говорится, что он полезен для внешних зависимостей или когда ваш компонент полагается на API браузера, такие как window.

На самом деле, до применения Atomic Design, React.lazy и React.Suspense требовали серьезного рефакторинга компонентов и страниц, но после применения Atomic Design и использования Dynamic Import, использовать обе функции стало очень просто.

Ссылки

• jotai vs mobx vs recoil vs redux vs zustand | npm trends
• React Context vs Redux: кто из них лучший для профессиональной разработки фронтенда
• React State Management Libraries: Какая из них?
• Расширенные возможности: Динамический импорт | Next.js