თუ თქვენ ხართ React-ის დეველოპერი, რომელსაც ჯერ არ უსწავლია React hooks-ის შესახებ, ახლა სწორედ ის მომენტია. ეს პოსტი დეტალურად განიხილავს useEffect React Hook-ს. ეს არის შვეიცარიული არმიის დანის კაკლის ეკვივალენტი. ის აგვარებს სხვადასხვა საკითხს, მაგალითად, როგორ მივიღოთ მონაცემები კომპონენტის დამონტაჟებისას, როგორ გაუშვათ კოდი, როდესაც იცვლება მდგომარეობა ან საყრდენი, როგორ დააყენოთ ტაიმერი ან ინტერვალები და ა.შ.
UseEffect გამოიყენება თითქმის ყველაფრისთვის, რისი გაკეთებაც გსურთ React კომპონენტში, რომელიც არ აბრუნებს JSX-ს (ნებისმიერი ტიპის გვერდითი ეფექტი). თქვენ ასევე შეიძლება გქონდეთ რამდენიმე UseEffects თითო კომპონენტზე.
ყველა ამ ძალას აქვს ფასი: თუ არ გესმით, როგორ მუშაობს, ეს შეიძლება იყოს დამაბნეველი. ამ პოსტში ჩვენ განვიხილავთ სხვადასხვა მაგალითს, რათა თქვენ შეძლოთ კონცეპტუალური მოდელის გაგება და მისი გამოყენება საკუთარ კოდზე.
ონლაინ თამაში React Hooks – რის გადაჭრას ცდილობს?
ჰუკები პირველად დაინერგა React ვერსიაში 16.8 და ახლა გამოიყენება მრავალი React პროექტის მიერ. ჰუკსი გადალახავს კომპონენტებს შორის კოდის გამეორების პრობლემას. ისინი იწერება კლასების გამოყენების გარეშე. ეს არ ნიშნავს, რომ React ტოვებს კლასებს; კაკვები უბრალოდ ალტერნატიული მეთოდია.
React საშუალებას გაძლევთ სწრაფად შექმნათ დახვეწილი კომპონენტები სახელმწიფოებრივი ლოგიკით. ძნელია ამ კომპონენტების გამოყოფა, რადგან კლასი ეყრდნობა React Lifecycle Methods-ს. აქ შემოდის React Hooks.
ისინი საშუალებას გაძლევთ დაყოთ კომპონენტი უფრო მცირე ფუნქციებად. იმის ნაცვლად, რომ დაყოთ კოდი პატარა ნაწილებად სიცოცხლის ციკლის მეთოდებზე დაყრდნობით, ახლა შეგიძლიათ მოაწყოთ და გამოყოთ კოდი უფრო პატარა ერთეულებად, ფუნქციონალობიდან გამომდინარე.
რა არის useEffect Hook?
Hooks არის ფუნქციები, რომლებიც საშუალებას გაძლევთ შეხვიდეთ მდგომარეობის და სხვა რეაქციის შესაძლებლობებზე ES6 კლასების დაწერის გარეშე. React Hooks API-ს აქვს კაკალი სახელად useEffect. თუ თქვენ იცნობთ რეაქციის სასიცოცხლო ციკლებს, useEffect hook იგივეა, რაც კომპონენტიDidMount, კომპონენტიDidUpdateდა კომპონენტი WillUnmount სასიცოცხლო ციკლის მეთოდები კომბინირებული.
React Hooks-ის დოკუმენტაციის მიხედვით, ის შეიქმნა ES6 კლასის კომპონენტის სასიცოცხლო ციკლის მეთოდების ზოგიერთი პრობლემის გადასაჭრელად.
სინტაქსი
პირველი არგუმენტი არის გამოძახების ფუნქცია, რომელიც ნაგულისხმევად სრულდება ყოველი რენდერის შემდეგ. მეორე პარამეტრი არის არასავალდებულო Dependency მასივი, რომელიც ავალებს Hook-ს გამოძახება მხოლოდ იმ შემთხვევაში, თუ სამიზნე მდგომარეობა შეიცვლება.
ჰუკი ადარებს თითოეული დამოკიდებულების ისტორიულ და ამჟამინდელ მდგომარეობას. თუ ორი მნიშვნელობა არ ემთხვევა, Hook იწვევს პირველ პარამეტრში მითითებულ გამოძახებას. დამოკიდებულების მასივები ცვლის ჩვეულ გამოძახების ქცევას და გარანტიას იძლევა, რომ Hook უგულებელყოფს ყველა სხვა კომპონენტს კომპონენტის საზღვრებში.
ძირითადი გამოყენება
შეტყობინების შესანახად მე ვიყენებ React useState კოდის ზემოთ მოცემულ ნიმუშში. ამის შემდეგ ვიღებ ჩემი შეტყობინების მდგომარეობის ცვლადს და ვბეჭდავ ეკრანზე. თუმცა, ახლა მსურს გამოვიყენო Effect, რათა შევცვალო შეტყობინება კომპონენტის დამონტაჟებიდან წამში.
მე ჩავდე ჩემი ეფექტი useState ხაზის უკან, React ფრეიმორიკიდან useEffect-ის იმპორტის შემდეგ. პირველი პარამეტრი, რომელიც გამოიყენება Effect არის ფუნქცია. როდესაც ეს ფუნქციის დამმუშავებელი შესრულდება, ის იზრუნებს თქვენს მიერ მოწოდებულ ნებისმიერ გვერდით ეფექტზე. ფუნქცია არის გამოძახების ფუნქცია, რომელიც გამოიძახება, როდესაც ხდება React კომპონენტის სასიცოცხლო ციკლის ერთ-ერთი მოვლენა.
როდის გამოვიყენოთ?
UseEffect Hook შეიძლება სასარგებლო იყოს სხვადასხვა სიტუაციებში. შემდეგი არის ყველაზე გადამწყვეტი:
- ჩვენ შეგვიძლია შევცვალოთ ეს პარამეტრი კლიენტის მხრიდან, როდესაც ჩვენ გვსურს მონაცემების მოძიება მოწოდებული არგუმენტის მიხედვით. ის გაიხსენება მას შემდეგ, რაც პარამეტრი განახლდება ახალი მონაცემებით.
- თუ გვსურს მონაცემების ამოღება API ბოლო წერტილიდან და ჩვენება კლიენტის მხარეს. როდესაც ჩვენი კომპონენტი რენდერი ხდება, ფუნქცია ან დამმუშავებელი, რომელიც მოცემულია useEffect hook-ზე, შესრულდება და მონაცემები კომპონენტში მდგომარეობს. ეს სტატუსები შემდეგ გამოიყენება მომხმარებლის ინტერფეისის კომპონენტებში.
- როდესაც თქვენი კომპონენტი ეყრდნობა გარე სამყაროს მონაცემებს და ჩვენ ვერ დავრწმუნდებით, რომ მონაცემები მოვა, ჩვენ უნდა გამოვიყენოთEffect (შესაძლოა სერვერი იქ არის ქვემოთ). იმის ნაცვლად, რომ გადააგდოთ პრობლემები და თავიდან აიცილოთ სხვა კომპონენტების ჩვენება, მოათავსეთ ისინი useEffect Hook-ში.
გამოყენების შემთხვევაში
თუ კომპონენტი ხელახლა გადაიცემა პირველი გაშვების შემდეგ, ის არ შესრულდება.
როდესაც კომპონენტი რენდერი ან ხელახალი რენდერია, ის ყოველთვის უნდა შესრულდეს.
სტანდარტულად, პროგრამა მუშაობს მხოლოდ ერთხელ. ამის შემდეგ, თუ საყრდენი მნიშვნელობები შეიცვლება, გაუშვით:
ასინქრონული აქტივობებისთვის ყოველთვის გამოიყენეთ useEffect.
useEffect კოდის ბლოკები არის ასინქრონული სამუშაოების აშკარა მარკერები თქვენი თანამემამულე დეველოპერებისთვის. შესაძლებელია ასინქრონული კოდის შექმნა useEffect-ის გამოყენების გარეშე, მაგრამ ეს არ არის „React მეთოდი“ და ზრდის როგორც სირთულეს, ასევე შეცდომების რისკს.
UseEffect-ის გამოყენება ასინქრონული კოდის დაწერის ნაცვლად, რომელმაც შეიძლება შეაჩეროს ინტერფეისი, არის ცნობილი ტექნიკა React საზოგადოებაში, განსაკუთრებით ის, თუ როგორ ააშენა ის React-ის გუნდმა გვერდითი ეფექტის შესასრულებლად.
მისი გამოყენების კიდევ ერთი უპირატესობა ის არის, რომ დეველოპერებს შეუძლიათ უბრალოდ გადახედონ კოდს და დაუყოვნებლივ აღმოაჩინონ კოდი, რომელიც გაშვებულია „კონტროლის ნაკადის მიღმა“, რაც მნიშვნელოვანი ხდება მხოლოდ პირველი რენდერის ციკლის შემდეგ. გარდა ამისა, ბლოკები შესაფერისია ხელახლა გამოყენებად და კიდევ უფრო სემანტიკურად მორგებულ ჰუკებში მოსაპოვებლად.
Მაგალითი
useEffect კოდის გამოყენებით, გაზარდეთ რიცხვი წამში.
დასკვნა
UseEffect Hook-ის ძირითადი დიზაინის პრინციპებისა და საუკეთესო პრაქტიკის გაგება, ჩემი აზრით, კრიტიკული უნარია იმისთვის, რომ ისწავლო, თუ გინდა გახდე შემდეგი დონის React დეველოპერი.
შეჯამებისთვის, useEffect Hook იღებს ფუნქციას, რომელიც მოიცავს იმპერატიულ, პოტენციურად ეფექტის სრულ ლოგიკას. დამოკიდებულების მასივი, რომელიც არის მეორე პარამეტრი, შეიძლება გამოყენებულ იქნას შესრულებაზე გავლენის მოხდენის მიზნით. მასთან ურთიერთობისას ასევე აუცილებელია დასუფთავების კოდის დაწერა დაბრუნების ფუნქციის გამოყენებით.
შეგვატყობინეთ კომენტარებში, თუ სტატია სასარგებლო იყო.
დატოვე პასუხი