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

Хукі стану

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

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

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

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

Хукі кантэксту

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

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

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

Хукі рэфаў

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

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

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

Хукі эфектаў

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

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

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

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

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

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

Хукі прадукцыйнасці

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

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

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

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

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

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

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

Іншыя хукі

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

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

• useActionState дазваляе кіраваць станам дзеянняў.

Уласныя хукі

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