Галоўная / Артыкулы / Адаптаванне React 19.2: Функцыя для інтерфейсаў з вкладкамі та спіс пераканальных пунктав для апдэйта

ReactReact 19ActivityPerformanceSecurity

Адаптаванне React 19.2: Функцыя для інтерфейсаў з вкладкамі та спіс пераканальных пунктав для апдэйта

Як функцыя Activity ў React 19.2 дапамагае захаваць скрытыя вкладкі жывымі, як працюють useEffectEvent і прадзеявленне, і як выбраць, чы робіць апгрэйд і патчы для прыкладоў RSC зараз.

904 слоў

Карточкі, візарды і спісы за межама екрана маюць адну проблему: калі сховаць панель за дапамою умовнай візуалізацыі, яна зникае, а разам з нею зникае і пазыцыя прасування, непадзейшыя формы і запрашаныя даны. React 19.2 рашае гэту проблему за дапамою компонента Activity. У гэтым кяліку Activity прыкладзены да лейауту з карточкамі, пасля што рассказваецца пра іншыя новыя функцыі тэй версіі і даёмася чарткі для адказу на пытанне, калі трэба апгрэйдаваць.

Што намагаецца паспрацаваць 19.2

У настоўчыну React выходзіць калькі версій у год, і 19.2 не ўсё перапісваець. Яна нацэлена на старыя проблемы: втрата стану пад час знікнення компонента, проблемы з завісанасцю эфектаў і баланс межы швайнах статычных сторунак і свежых даных.

Activity: сховванне UI без яго знікнення

Уявіце Activity як болей розумны альтэрнатыўны варыянт {condition && <Panel />}. Яна прыймае атрыбут mode з двума значэннямі:

  • hidden скрывае дзецяўскія элементы, знімае ўсе яныя эфекты і адкладае будзь-якія актуалізацыі, пакуль у React не застанется заданняў з вышэйшым прыорітетам.
  • visible паказвае дзецяўскія элементы, зноў запускае ўсе яныя эфекты і обробляе актуалізацыі за звычайным чынам.

Важлівы момант — што застаецца. Стан компонента і скарыстаўшыся дрэва захоўваныя, таму пераключэнне знову вядзецца мгновенна, але эфекты чыстяцца калі элемент скрыты. У зв’язку з гэтым падпісанні, таймеры і перацёны прыпыняюцца, што зазвычай і ўсё, чаго хочаце для панелі, якую ніхто не адгледвае.

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

// Preserve a tab's scroll position and form state
// even when the user switches away from it
import { unstable_Activity as Activity } from 'react';

function ProfileTabs({ activeTab }) {
  return (
    <>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsPanel />
      </Activity>
      <Activity mode={activeTab === 'billing' ? 'visible' : 'hidden'}>
        <BillingPanel />
      </Activity>
    </>
  );
}

Адзін застерэжны момент: гэты фрагмент імпортуе unstable_Activity, назву, якая викорыстоўвалася ў версіях да выходу на рынак. У стабільной версіі 19.2 гэты компонент экспортуецца як Activity, таму пераканайцеся ў актуальных інструкцыях і імпортуйте яго пад гэтай назвой праз апгрэйд.

Паколькі при кожной змяне нічога не адбываецца і не перабудовваецца, навігацыя здаецца быстрэй. Адзінны недзелл — це памяць: кожны схованы панель застаецца актыўным, таму выкорыстоўвайце Activity толькі для экранаў, якія корыстувачы, верагодна, будуць перазіраць, а не для кожнага маршруту.

useEffectEvent: свежыя значэнні без паўтарной рэалізацыі эфектаў

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

Хутчэй theme чытаецца ўнутры onConnected, таму з’яўленне з’язку залежыць толькі ад roomId.

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme); // always fresh theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('connected', () => onConnected());
    return () => connection.disconnect();
  }, [roomId]); // theme intentionally left out — and that's fine now
}

Заўважыце, што у гэтым фрагменте не паказваны вызов connection.connect(), які быў бы неабходны ў рэальнай реалізацыі перш чым вяртаць данні для очышчэння.

Частковая прадзейсвоўка ў React DOM

Частковая прадзейсвоўка з’явілася як эксперыментальная функцыя Next.js 14, а з версіяй 19.2 гэтае можлівасць стала часцю react-dom. React заздалегідь прадзейсвоўвае статычную частку стораніцы, залишае «дзерка» там, дзе знаходзяцца дынамічныя межы Suspense, і запоўняе гэтыя «дзерка» па кожнай запытці. Таким чынам атрыбуецца швальнасць статычнага генеравання разам з свежасцю, якая даётся серверной дзейсвоўкай. Наш адлеглыяй аналіз фундаментальных элементаў SSR у React 19.2, cacheSignal і PPR детальна раскрывае гэтыя API.

Меншыя дадзеныя, якія варта знать

  • У Chrome DevTools з’явіліся спецыяльныя показнікы карточкі Performance для React, якія дазволяюць бачыць, калі React плануе якія задачы як блакучыя, а калі як частыну пераходу і т. д.
  • cacheSignal для React Server Components памагае ухіліцца ад зайвай роботы, якая выконваецца па результатам кэшавання.
  • Удосконаленні практыкы SSR-стрімінгу спрямованы на прыскорэнне часу стварэння інтерактыўной аплікацыі.

Безпека: спачатку апдэйтуйце прыкладненні на RSC

Критычныя вразломы ў React Server Components былі агульнаведаны у грудзені 2025 года. Прыкладненні на React 19.0.0 да 19.2.2, якія викорыстоўваюць RSC, уключаючы стандартную настройку create-next-app, былі вразламаны для аддаленага выконання коду. Якщо вы викорыстоўваеце Server Components, негайна апдэйтуйцеся да версіі з патчамі; пераканайцеся ў точных версіях, якія былі выправлены, у офіцыйных адказах React і Next.js, адколькі былі публікуяцься дадатковыя патчы.

Чы гэты час ваша команда павінна апгрэдавацца?

  • Апгрэдавайце якомольша скора, якщо вы ствараеце сложныя SSR-прыемлі, выкладзеце UI з многама вікнамі або крокамі, або продовжваеце борацца з багамі, вызванымі залежнасцямі.
  • Апгрэдавайце астаткаўна, якщо вы падтрымляеце большы кодавой фундамент з минулых версій: спачатку прыкантэўце строгейшыя правілы лінта для хуків на адной галузі і вылечыце тое, што яны паказваюць.
  • Апгрэдавайце негаюч, незалежна ад фічар, якщо вы выкарыстоўваете Server Components і не застосавалі патчы безпекі.

Заключэнне

19.2 — это тыхі выласк, які дае практычныя наследы ў кожны дзень работы: Activity змінюе падход да керавання станам, useEffectEvent усувае групу хакоў, заснованых на залежнасцях, а прадзейнаванне скарочвае розныцю межаў статычнымі і дынамічнымі стораначкамі. Спробаваце іх на аднай стораначцы з вікнамі, перш чым распростраńваць іх шырока.

Спадневаная літэратура

Усе артыкулыДаслаць брыф