Галоўная / Артыкулы / Увод зместоў React-хуков: useState, useEffect, useReducer і спецыяльныя хукі

ReactTypeScriptReact HooksJavaScriptFrontend Development

Увод зместоў React-хуков: useState, useEffect, useReducer і спецыяльныя хукі

Выучыце, як правільна ўводзіць useState, useEffect, useReducer і спецыяльныя хукі ў TypeScript, а таксама калі выбір TypeScript замест звычайнага JavaScript дасваюць рэальныя перадкі.

1342 слоў

Памяткі збоў типа, які выявляюцца пад час компіляцыі, заходзяць вас ад сесій дэбаггінгу, якія інакш моглы бы трываць да пазней ночы, і самэ гэта ўсё тое прычына, чаму команды, якія выкарыстоўваюць React разам з TypeScript, спрытваюць типаваныя хукі як базовую частку, а не як розкіш. Звычка працаваць з типамі стану, эфектаў, редактараў і спецыяльных хуків — а таксама веданне таго, калі сама ідея выкарыстоўвання TypeScript є правильной — являюцца двумя аспектамі аднаго і тога ж практычнага навыку для стварэння надзеяных дапрацоўак на React.

Чаму безпека типа ўскладніць вашы хукі

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

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

Правільнае задаўанне типу useState

У большасці повсякдзенных случаў TypeScript сам адгадвае тип стану без жадной дапамогі:

// inferred as boolean, no annotation needed
const [isLoading, setIsLoading] = useState(false);

Ситуацыя змінюецца, калі пачатковая значэнне ўзначаецца як null або undefined — у такім случае трэба самостайна анотаваць тип, замест таго каб паслужыцца інференціяй:

interface UserProfile {
  id: string;
  name: string;
  avatarUrl: string;
}

const [user, setUser] = useState<UserProfile | null>(null);

Корыстным прыёмам тут є стрымлівасць ад бажання вярнуцца да генерычнага типу толькі каб зникла паведамленне пра адказку. Такое дзеянне таямна пазбавляе вас усіх пераканаў, якія вы намагаліся атрымаць з TypeScript з самага початку.

Заданне типа для useEffect: менш складна, чым чакалася

Гэнерікі насправды не пасуюць да useEffect, але вам все рава трэба быць адзярожнымі з масавымая завіснасці і логікай чысткі:

useEffect(() => {
  const controller = new AbortController();

  const fetchUser = async () => {
    const res = await fetch(`/api/users/${userId}`, {
      signal: controller.signal,
    });
    const data: UserProfile = await res.json();
    setUser(data);
  };

  fetchUser();

  return () => controller.abort(); // cleanup on unmount
}, [userId]);

Заданне типа для useReducer для болей сложнага стану

Этам хукам цэннае значэнне TypeScript становіцца явным:

type CartAction =
  | { type: 'ADD_ITEM'; payload: CartItem }
  | { type: 'REMOVE_ITEM'; payload: string }
  | { type: 'CLEAR_CART' };

function cartReducer(state: CartItem[], action: CartAction): CartItem[] {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter((item) => item.id !== action.payload);
    case 'CLEAR_CART':
      return [];
    default:
      return state;
  }
}

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

Стварэнне перадаўальных спецыяльных хуков з гэнерікамі

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = window.localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

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

Короткая версія

  • Дазвольце TypeScript самаму выважваць просты стан, але будзьце часткавы, калі значэнне можа быць null або undefined.
  • Моделюйце дзеянні useReducer як дыскурмінаваную ўнію.
  • Ўжывайце гэнерыкі ў спецыяльных хукі, каб яны моглі быць перадузначаныя для разных типаў данных.
  • Спрыймайце any як скоры спосаб, який пазней таямна коштае вас больш, чым заўсёды эконаміць.

Выбор между звычным JavaScript і TypeScript

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

Раней для выкарыстоўвання TypeScript патрабавалася борацца з процесамі складання, інструментамі на кшталт ts-node і великай колькасцю файлаў налаштавання, лепш чым ўсё гэта не запусціць скрыпт. Адныя як Node.js падтрымліваюць выкарыстоўванне абліковых типаў, гэтыя труднасці значна зменшыліся, і разлік межы між напісаннем звычайнага JavaScript і TypeScript стала значна меншой, чым раней.

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

Чаму звычайны JavaScript все ўсё мае свое месца

JavaScript — гэта язык, які браузер і Node.js розумеюць аблікова. Вы пішаце файл, запускаеце яго, і ён адразу ж выконваецца, без неабходнасці кампайляра і без додатковых заявлень.

  • Мгновенная стварэнне пратыпаў: калі вы тэстуеце ідэю, ствараеце шырокі скрыпт або працуеце над малым MVP, JavaScript дазволяе вам дзейсці на такой жа скорасці, якай спрыяе ваш разум.
  • Няма патрэбы ў налажванні: не трэба tsconfig.json чы ўпорядкування типаў, каб толькі пераканацца, што функцыя выпалняе тое, чаго вы ачаквалі.
  • Менш псыхічнага навантажэння: ваша увага застаецца на самай логіке програмы, а не на заявленнях типаў чы паведамленнях кампайляра.

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

Чаму TypeScript стае корыстным, калі проекты растуць

TypeScript додае статычную систему типаў на JavaScript, функцыонуючы як аўтаматычны пераглядач, який выявляе проблемы пад час напісання коду — напрыклад, паведамляючы пра тое, калі вы прабуяце передаць строку у функцыю, якая чакае число.

  • Дакументацыя, якая застаецца точной: типы служае жывой дакументацыяй. Інтэрфейс паведамляе вас пра точную структуру об’екта, не вымагаючы працаваць з канэлькамі файлаў з реалізацыяй.
  • Безпечнейшая рефакторка: які бы вы не зменілі ў модэлі дадзенаў або схеме базы дадзенаў, кампайлер паказвае всі месцы ў кодбазе, якія тепер трэба апдэйтаваць.
  • Кращая падтрымка рэдагувальніка: такія інструменты, як VS Code або Cursor, выкарыстоўваюць сервер мовы TypeScript для швайнае автодаполнення і выявлення памылак у момент рэдагавання.

Історычна цена такога компрэсу была справжнім „падаткам на інструменты“ — налаштаванне кампайляраў, карт вывара коду і скрытых скрыптаў дадавала дапынковыя крокі да таго, што раней было простым процесам разработкі.

Чаму гэты компрэс больш не дыяе так сама

Старая працоўнае скарга, што „налаштаванне TypeScript — гэта занадта многа працы“, больш не ўсё такая сильная. Сучасныя версіі Node.js можаць запускать файлы TypeScript безпосередна, без аддзельнага кроку компіляцыі, завялікі зняцья інформацыі пра типы.

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

Падбіранне інструмента па задачы

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

Для практычна всіх іншых случаёў — кодавых базаў команд, прыкладнасцей з калькамі дадзеных, якія взаімаюцца межы сабой, чыста для проектаў, якія плануецца падтрымваць больш чым месцыну — невялкае колькасць настройк, якія трэба здзейсніць для TypeScript, ўзрабатваецца. Паколькі сучасныя рантаймы ўсё равна эфектыва адмаўляюць выкананне ў будзь-якім разе, на самай працы нема неабходнасці выбіраць между гнучкасцю і безпекай: простасць JavaScript і правіла захавання TypeScript ўсё роўна доступныя, і выбір аднаго з іх больш заўсёды стосуецца падбору такога варіянта, які будзе падходзіць да таго, насколькі давга і са спавярненням будзе працаваць проект.

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

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