Продвинутый React и Redux

Store держит всё состояние приложения как одно дерево объектов, доступное только для чтения. Action — это обычный объект, описывающий, что произошло, с полем type. Reducer — чистая функция (state, action) => newState, возвращающая следующее состояние без мутации старого.

Component всегда перерендеривается, когда это делает родитель. PureComponent реализует shouldComponentUpdate с поверхностным сравнением props и state, пропуская рендер, если на верхнем уровне ничего не изменилось. React.memo — аналог для функциональных компонентов, сравнивающий только props поверхностно.

Context позволяет значению дойти до глубоко вложенных компонентов, не передавая его как prop через каждый уровень — он убирает prop drilling. Провайдер задаёт значение высоко в дереве, а любой потомок читает его напрямую через useContext, сколько бы слоёв ни было между ними.

Ref — это escape-hatch, дающий императивный доступ к значению, переживающему перерендеры и не вызывающему их. На host-элементе он держит сам DOM-узел — для фокуса поля, измерения раскладки или управления медиа; на классовом компоненте — его инстанс.

Оба разделяют сквозную логику. Компонент высшего порядка — функция, принимающая компонент и возвращающая обёрнутый с дополнительными props/поведением (например, connect); это углубляет дерево и может конфликтовать по именам props. Render props передают функцию как prop, которую компонент вызывает для отрисовки, делая поток данных явным и «слотовым», но порождая вложенность обёрток. Кастомные хуки сегодня во многом вытеснили оба для переиспользования логики.

Данные текут в одну сторону. UI вызывает store.dispatch(action). Store запускает редьюсеры — чистые функции, принимающие текущий state и action и возвращающие либо тот же state, либо новый неизменяемо, никогда не мутируя старый. Store сохраняет возвращённый state и уведомляет подписчиков, которые перечитывают его и перерендериваются. State доступен только для чтения; единственный способ его изменить — задиспатчить action.

Middleware — это слой, перехватывающий каждый отправленный action после dispatch, но до того, как он дойдёт до reducers. Здесь живут побочные эффекты: логирование, async-вызовы, аналитика, отчёты о падениях. Каждый middleware вызывает next(action), передавая управление дальше.

Нормализация уплощает вложенные данные в структуру, похожую на БД: каждый тип сущности лежит в справочнике по id, а связи хранятся как массивы id, а не вложенные копии. Это убирает дублирование и делает обновления дешёвыми, локальными и O(1) для поиска.

Компонент перерендеривается, когда меняется его собственный state, когда перерендеривается родитель, или когда меняется потребляемый контекст. React по умолчанию НЕ сравнивает props глубоко — рендер родителя перерендеривает всех детей независимо от того, изменились ли их props. React.memo (и PureComponent/shouldComponentUpdate у классов) оборачивает компонент, чтобы пропустить перерендер, когда поверхностное сравнение props не выявило изменений.

Оба — middleware для async-работы и побочных эффектов, ведь reducers должны оставаться чистыми. redux-thunk позволяет action creator вернуть функцию, получающую dispatch/getState — минималистично, легко освоить, идеально для простых async-потоков.

Берите context для по-настоящему глобальных, редко меняющихся данных, которые читают многие компоненты — пользователь, тема, локаль. Избегайте для часто меняющихся или нужных лишь паре соседних: каждый потребитель перерендеривается при смене идентичности значения провайдера.

reselect создаёт мемоизированные селекторы, вычисляющие производные данные из store Redux. Селектор кэширует результат и пересчитывает его только при изменении конкретных входных срезов (сравнение по ссылке), поэтому дорогие преобразования (фильтрация, сортировка, агрегация) выполняются раз, а не на каждом рендере.