index.md

title
Убудаваныя ў React хукі

Хукі дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваня хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі.

---

Хукі стану {/state-hooks/}

Стан дазваляе кампаненту «запамінаць» даныя, напрыклад уведзеныя карыстальнікам. Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання уведзеных значэнняў, у свой жа час кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыс.

Каб дадаць стан у кампанент, выкарыстоўвайце адзін з дадзеных хукаў:

• useState задае парменную стану, яку вы можаце абнаўляць напрамую.
• useReducer задае пераменную стану, логіка абнаўленне якой апісваецца праз функцыю рэд’юсара.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

---

Хукі кантэксту {/context-hooks/}

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

• useContext чытае і падпісваецца на абнаўленні кантэкста.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

---

Хукі рэфаў {/ref-hooks/}

Рэфы дазваляюць кампаненту ўтрымліваць інфармацыію, якая не выкарыстоўваецца падчас рэндэрынгу, напрыклад: вузлы DOM ці ідэнтыфікатары тайм-аўтаў. У адрозненні ад стану, абнаўленне ref не прыводзіць на перарэндэрынгу кампанента. Рэфы — сваеасаблівая «лазейка», каб выбрацца з парадыгмы React. Яны карыстыя, калі даводзіцца працаваць з не React сістэмамі, напрыклад з API браўзера.

• useRef аб’яўляе рэф. Вы можаце захоўваць у іх любыя даныя, але ў большасці выпадкаў у іх захоўваюць вузлы DOM.
• useImperativeHandle дазваляе наладзіць рэф вашага кампанента. Выкарыстоўваецца рэдка.

function Form() {
  const inputRef = useRef(null);
  // ...

---

Хукі эфектаў {/effect-hooks/}

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

• useEffect падлучае кампанент да хнейшняй сістэмы.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Эфекты — «лазейкі», што дазваляюць выбрацца з парадыгмы React. Не выкарыстоўвайце Эфекты для арганізацыі патокаў даных унутры праграмы. Калі вы не ўзаемадзейнічаеце са знешняй сістэма, імаверна, вам не патрэбны эфект.

Існуюць таксама два іншыя варыянты useEffect, якія спрацоўваюць у іншы час, яны выкарыстоўваюцца не так часта:

• useLayoutEffect спрацоўвае перад тым, як браўзер абновіць экран. Можна выкарыстоўваць для вымярэнняў элементаў старонкі.
• useInsertionEffect спрацоўвае перад тым, як React абновіць DOM. Бібліятэкі могуць выкарыстоўваць, каб дынамічна падстаўляць CSS.

---

Хукі прадукцыйнасці {/performance-hooks/}

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

Кадб прапусціць вылічэнні і непатрэбны перарэндэрынг, выкарыстоўвайце наступныя хукі:

• useMemo дазваляе кэшаваць вынік складаных вылічэнняў.
• useCallback дазваляе кэшаваць аб’яўленую функцыю перад тым, як перадаць яе далей у аптымізаваны кампанент.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

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

Для прыярытэтызацыі рэндэрынгу, выкарыстоўвайце адзін з наступных хукаў:

• useTransition дазваляе памеціць пераход стану як неблакуючы і дазваляе іншым абнаўленням перарываць яго.
• useDeferredValue дазваляе адкласці абнаўленне некрытычных часткак інтэрфейса на карысць іншых.

---

Хукі рэсурсаў {/resource-hooks/}

Рэсурсы — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise ці інфармацыю пра тэму з кантэкста.

Для атрымання даных з рэсурса, выкарыстоўвайце наступных хук:

• use дазваляе атрымліваць значэнні з такіх рэсурсаў, як Promise ці кантэкст.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

---

Іншыя хукі {/other-hooks/}

Гэтыя хукі болей карыстыя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм.

• useDebugValue дазваляе наладзіць цэтлік, які React DevTools будзе паказваць для вашага хука.
• useId дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў.
• useSyncExternalStore дазваляе кампаненту падпісацца на знешняе сховішча.

---

Уласныя хукі {/your-own-hooks/}

Вы таксама можаце аб’яўляць свае самастойна створаныя хукі як JavaScript функцыі.