Hooks танилцуулга

Hooks React 16.8-д нэмэгдсэн шинэ нэмэлт юм. Тэд төлөв болон React-н бусад боломжуудыг класс бичихгүйгээр ашиглах боломжийг олгож байна.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Энэ шинэ функц болох useState нь анхны “Hook” бөгөөд энэ жишээ зүгээр л эхлэл юм. Бид үүнийг дахин судлах бөгөөд одоохондоо ойлгохгүй бол бүү санаа зов!

Та Hooks-г дараагийн хуудас дээрээ эхлэн сурж болно. Энэ хуудсанд бид яагаад Hooks-г React руу нэмэх болсон, үүнийг ашиглан хэрхэн гайхалтай програмууд хийж болдог талаар тайлбарлах болно.

Анхаар

React 16.8.0 бол анхны Hooks дэмждэг хувилбар юм. Програмаа шинэчилж байхдаа React DOM-г багтаан бусад сангуудаа шинэчлэн ахиулахаа битгий мартаарай. React Native нь 0.59 хувилбараас эхлэн Hooks дэмждэг болсон.

Видео танилцуулга

React Conf 2018 дээр Sophie Alpert болон Dan Abramov нар Hooks-г танилцуулсан бөгөөд залгуулаад Ryan Florence програмаа хэрхэн Hooks ашиглан сайжруулах(refactor) талаар үзүүлсэн юм. Видеог энд үзнэ үү:

No Breaking Changes

Бид үргэлжлэхийн өмнө Hooks гэж юу болох талаар анхааръя:

• Бүрэн дэмжигдсэн(opt-in). Та нь Hooks-г байгаа код дээрээ дахин бичилгүйгээр цөөн компонентууд дээр туршиж болно. Хэрэв хүсэхгүй бол та Hooks-г сурахгүй эсвэл ашиглахгүй байж болно.
• 100% backwards-compatible. Hooks ямар нэг том өөрчлөлт агуулаагүй.
• Одоо ч бэлэн. Hooks нь хувилбар v16.8.0 дээр бэлэн болсон.

React-с классууд хасах ямар төлөвлөгөө байхгүй. Та энэ хуудасны доор хэсэгт Hooks-г аажмаар нэвтрүүлэх аргийн талаар уншиж болно.

Hooks таны мэддэг React агуулгуудын мэдлэгийг солихгүй. Түүний оронд Hooks нь илүү шууд API-г таны аль хэдийн мэддэг ухагдахуунад олгодог: props, state, contenx, refs болон амьдралын мөчлөг. Мөн Hooks нь тэдгээрийг нэгтгэх шинэ хүчирхэг арга санал болгохыг бид дараа харуулна.

Хэрэв та зүгээр л Hooks-г сурж эхлэхийг хүсвэл шууд дараагийн хуудас руу шилжиж болно! Мөн түүнчлэн та яагаад Hooks-г нэмсэн талаар, хэрхэн програмаа дахин бичихгүйгээр ашиглаж болох талаар мэдмээр байвал энэ хуудсыг үргэлжлүүлэн уншаарай.

Motivation

Hooks нь React дээр таваас олон жилийн турш мянга мянган компонентууд хөгжүүлэх явцад шийдэгдээгүй өргөн хүрээний асуудлуудыг шийддэг. Та эхлэн суралцаж байгаа, өдөр болгон ашигладаг, эсвэл бүр ижилхэн компонент загварын сан ашигладаг ч бай та эдгээр асуудлууд таньд учирсан байж магадгүй.

Компонентууд хооронд төлөвт логикийг дахин ашиглах хэцүү

React компонент руу ямар нэг ажиллагааг дахин ашиглах боломж санал болгодоггүй(жишэлбэл, хадгалах зай руу холбогдох). Хэрэв та React дээр ажиллаад удаж буй бол тань render props болон higher-order components гэх мэт загварууд танил санагдах болох бөгөөд Hooks нь үүнийг шийдэхийг оролддог. Гэхдээ эдгээр хэв загварууд таныг компонентуудаа ашиглах үед дахин бүтэцлэхийг шаарддаг нь төвөгтэй бөгөөд кодыг ойлгоход хэцүү болгодог. Хэрэв та энгийн React програмыг React DevTools-р харвал та олгогчоос өгсөн давхарга, дээд түвшний компонент, шинж чанар дүрслэлт, болон бусад төрлийн хийсвэрлэлүүдээс бүтсэн “олон давхар хүрээлэгдсэн” компонентуудыг олж харна. Түүнийг DevTools-р ялган харж чадах ч энэ React-д төлөвт логикийг хуваалцах сайн төрөл хэрэгтэй гэх суурь асуудал руу хөтөлдөг.

Hooks-р төлөвт логикийг компонентоос салган авч бие шалгагдах болон дахин ашиглагдаж боломжтой болгодог. Hooks нь таны компонентийн шатлалыг өөрчлөхгүйгээр төлөвт логикийг дахин ашиглаж бололцоо олгодогy. Энэ нь Hooks-г компонентуудын дунд амархан хуваалцдаг.

Бид үүнийг дэлгэрэнгүйгээр өөрийн Hooks бүтээх хэсэгт ярилцана.

Цогц компонентууд нь ойлгоход хэцүү болдог

Бид компонентийг ихэвчлэн энгийнээс эхлэн хөгжүүлдэг ч яваандаа томрон удирдагдахийн аргагүй төлөвт логиктой болж өсдөг. Амьралын циклийн функц бүр нь ихэвчлэн хамараалгүй логик агуулсан байх нь элбэг. Жишээлбэл, компонент нь componentDidMount болон componentDidUpdate нь өгөгдөл татаж авах логик агуулсан байдаг. Хэдийгээр ижил componentDidMount функц эвент сонсох тохируулагдаад componentWillUnmount дээр цэвэрлэгдэх хамааралгүй логик агуулсан байж болно. Бие биедээ хамааралтай ч тусдаа байдаг байж болох ч, ямар ч хамааралгүй код нь нэг функц дээр үлдэж болно. Энэ нь гажуудал болон нийцтэй бус байдал амархан үүсгэдэг.

Олон тохиолдлуудад эдгээр компонентуудыг жижиг хэсэг болгон салгахад хэцүү байдаг нь төлөвт логик нь хаа сайгүй байдагтай холбоотой. Мөн түүнчлэн тэдгээрийг тестлэхэд хэцүү байдаг. Энэ нь хүмүүс React компонентийг тусдаа төлвийн удирдлагын сангуудтай нийлүүлэх шалтгаануудын нэг болдог. Гэсэн хэдий ч энэ нь хэтэрхий их хийсвэрлэл шаарддаг, олон файл руу дамжих хэрэгцээ гардаг, компонентийг дахин ашиглахад төвөгтэй болгодог.

Үүнийг шийдэхдээ амьдралын циклийн функцууд дээр үндэслэхийн оронд Hooks нь нэг компонентийг жижиг хэсгүүдийн хамаарал дээр тулгуурлан жижин функцууд болгон салгадаг (subscription эсвэл өгөгдөл татах тохируулах гэх мэт). Та магадгүй компонентийн дотоод төлвийг илүү таамаглах боломжтой болгох үүднээс reducer ашиглахийг илүүд үзэж магадгүй.

Hook ашиглах нөлөөг бид дэлгэрэнгүй ярих болно.

Классууд нь машин болон хүмүүсийг төөрөгдүүлдэг

Нэмээд хэлэхэд кодыг дахин ашиглах болон кодын бүтцийг илүү төвөгтэй болгоход классуд нь React сурах хамгийн том хаалт гэж боддог. Та Жаваскрипт дээр this хэрхэн ажилладгийг ойлгох хэрэгтэй бөгөөд энэ нь бусад хэлнүүдээс маш өөр байдаг. Та эвентийн удирдлагуудаа холбох хэрэгтэй гэдгийг санах хэрэгтэй. Тогтворгүй синтакс бичиглэлгүйгээр код нь хэтэрхий дэлгэрэнгүй болдог. Хүмүүс төлөв, шинж чанар, дээрээс доош өгөгдлийн урсгалыг сайн ойлгож чадах ч класс дээр саад учирсаар л байдаг. React дээр функц болон класс компонентуудын ялгаа болон тэдгээрийг ашиглах нь туршлагатай React хөгжүүлэгдэд хүртэл санал зөрөлдөх байдал үүсгэдэг хэцүү.

React гараад 5 жил болж байгаа бөгөөд дараагийн 5 жилд ч ийм байх болно. Svelte, Angular, Glimmer, болон бусад, ahead-of-time compilation-н компонентууд нь олон ирээдүйн боломжтой. Ялангуяа загвар дээр хязгааргүй. Сүүлийн үед бид component folding-г Prepack ашиглан туршиж байгаа бөгөөд сайн үр дүнгүүд гарч байгаа болно. Гэсэн хэдий ч класс компонентууд нь бодоогүй хэв загвар руу орох нь сайжруулалтыг удаан зам руу хөтөлж болно. Классууд нь одоогийн хэрэгслүүд дээр асуудалтай байна. Жишээлбэл, классууд нь тийм ч сайн жижигсэхгүй(minify) байгаа нь ачаалах үед удаан болон найдваргүй болгож байна. Бид API-г илүү код нь илүү сайжруулагдах боломжтой замд үлдээхээр хүсэж байна.

эдгээр асуудлыг шийдэхийн тулд ** Hooks-г классгүй боломжууд дээр ашиглуулж байна.** Агуулгын хувьд React компонентууд нь үргэлж функцтэй ойрхон байсан. Hooks функцийг багтаадаг ч React-н үндсэн суурийг эвддэггүй. Hooks нь таниас цогц функионал болон reactive програмын техникуудыг сурахаас зайлсхийх боломжийг олгодог.

Жишээнүүд

Hooks-г хальт анзаарахад нийтлэл нь сурж эхлэх эхний цэг байх болно.

Аажмаар үрчлэх аргачлал

TLDR: React-с классуудыг хасах төлөвлөгөө байхгүй

Бид React хөгжүүлэгчид бүтээгдэхүүнээ нэвтрүүлэх дээрээ төвлөрөн шинэ гарч байгаа API болгоныг харах цаг байхгүйг мэднэ. Hooks нь нэн шинэ бөгөөд сурж эхлэх эсвэл хэрэгжүүлэхээс өмнө илүү дэлгэрэнгүй тайлбартай жишээнүүд гартал хүлээх нь дээр байж магадгүй.

Бид мөн React руу шинэ зүйл нэмэх нь хэтэрхий их гэдийг ч ойлгодог. Сониуц уншигчдад бид дэлгэрэнгүй RFC нийтэл бэлдсэн бөгөөд илүү дэлгэрэнгүй жишээтэй сэдэл, тусгай дизайний шийдэл дээр илүү харах өнцөг багтаасан.

Голчлон Hooks нь байгаа код дээр тал талаар ажилладаг бөгөөд та түүнийг аажмаар нэвтрүүлж болно. Hooks руу шилжүүлэхэд яарах зүйлгүй. Бид ялангуяа бичигдсэн цогц компонентууд дээр “код дахин бичихийг” зөвлөхгүй. Энэ нь бага зэрэг “Hooks дээр сэтгэх” сэтгэлгээний өөрчлөлт хэрэг болно. Бидний туршлагаас чухал биш болон шинэ компонентууд дээр Hooks ашиглан эхлээ дадлага хийгээд та болон таны баг хэрхэн тааламжтай хүлээж авахийг магадлах нь чухал гэж үздэг. Hooks-г туршсаны дараа эерэг эсвэл сөрөг сэтгэглийн алиныг ч бай илгээхээсээ битгий нэрэлхээрэй.

Бид Hooks-г классын бүх хэрэглээний тохиолдлууд дээр байлгахийг зорьж байгаа бөгөөд классын компонентын ирээдүнй боломжуудыг хүртэл дэмжсээр байх болно. Facebookд бид олон мянган компонентийг класс байдлаар бичсэн бөгөөд тэдгээрийг дахин бичих ямар төлөвлөгөө байхгүй. Оронд нь бид шинэ код дээрээ Hooks ашиглан класстай хамт ашиглаж эхэлж байна.

Түгээмэл асуултууд

Бид Hooks түгээмэл асуултын хуудас бэлдсэн бөгөөд Hooks-н тухай нийтлэг асуултуудад хариу өгсөн болно.

Дараагийн алхам

Энэ хуудсын төгсгөлд Hooks ямар асуудлуудыг шийддэг талаар анхны төсөөллөө авсан байж болох олон дэлгэрнгүй зүйлс тодорхойгүй үлдсэн байж болно. Санаа бүү зов! ** Одоо дараагийн хуудас руу шилжин Hooks-г жишээгээр сурцгаая.**