ប្រសិនបើអ្នកជាអ្នកអភិវឌ្ឍន៍ React ដែលមិនទាន់បានសិក្សាអំពី React hooks ពេលនេះដល់ពេលហើយ។ ការបង្ហោះនេះនឹងរៀបរាប់លម្អិតតាមរយៈ useEffect React Hook ។ វាគឺជាទំពក់ស្មើនឹងកាំបិតកងទ័ពស្វីស។ វាដោះស្រាយបញ្ហាជាច្រើនដូចជា របៀបទទួលបានទិន្នន័យនៅពេលដំឡើងសមាសភាគ របៀបដំណើរការកូដនៅពេលដែលស្ថានភាព ឬ prop ផ្លាស់ប្តូរ របៀបកំណត់កម្មវិធីកំណត់ម៉ោង ឬចន្លោះពេលជាដើម។
useEffect គឺត្រូវបានប្រើសម្រាប់អ្វីដែលអ្នកចង់ធ្វើជាច្រើននៅក្នុង React component ដែលមិនត្រឡប់ JSX (ប្រភេទនៃផលប៉ះពាល់ណាមួយ)។ អ្នកក៏អាចមាន useEffects ជាច្រើនក្នុងមួយសមាសភាគ។
ថាមពលទាំងអស់នេះមកក្នុងតម្លៃថ្លៃ៖ លុះត្រាតែអ្នកយល់ពីរបៀបដែលវាដំណើរការ វាអាចនឹងមានការងឿងឆ្ងល់។ នៅក្នុងការបង្ហោះនេះ យើងនឹងពិនិត្យមើលឧទាហរណ៍ជាច្រើន ដើម្បីអោយអ្នកអាចចាប់យកគំរូគំនិត និងអនុវត្តវាទៅលេខកូដផ្ទាល់ខ្លួនរបស់អ្នក។
ប្រតិកម្ម Hooks - តើវាកំពុងព្យាយាមដោះស្រាយអ្វី?
Hooks ត្រូវបានណែនាំជាលើកដំបូងនៅក្នុង React កំណែ 16.8 ហើយឥឡូវនេះត្រូវបានប្រើប្រាស់ដោយគម្រោង React ជាច្រើន។ Hooks យកឈ្នះលើបញ្ហានៃកូដដដែលៗរវាងសមាសធាតុ។ ពួកគេត្រូវបានសរសេរដោយមិនប្រើថ្នាក់។ នេះមិនមានន័យថា React បោះបង់ចោលថ្នាក់នោះទេ។ ទំពក់គឺគ្រាន់តែជាវិធីសាស្រ្តជំនួស។
React អនុញ្ញាតឱ្យអ្នកបង្កើតសមាសធាតុស្មុគ្រស្មាញយ៉ាងឆាប់រហ័សជាមួយនឹងតក្កវិជ្ជាដែលមានលក្ខណៈច្បាស់លាស់។ វាពិបាកក្នុងការបំបែកសមាសធាតុទាំងនេះ ដោយសារថ្នាក់ពឹងផ្អែកលើ React Lifecycle Methods។ នេះជាកន្លែងដែល React Hooks ចូលមក។
ពួកគេអនុញ្ញាតឱ្យអ្នកបែងចែកសមាសធាតុទៅជាមុខងារតូចៗ។ ជំនួសឱ្យការបែងចែកកូដទៅជាបំណែកតូចៗដោយផ្អែកលើវិធីសាស្ត្រ Lifecycle ឥឡូវនេះអ្នកអាចរៀបចំ និងបំបែកកូដទៅជាឯកតាតូចៗ អាស្រ័យលើមុខងារ។
តើ useEffect Hook ជាអ្វី?
Hooks គឺជាមុខងារដែលអនុញ្ញាតឱ្យអ្នកចូលប្រើស្ថានភាព និងសមត្ថភាពប្រតិកម្មផ្សេងទៀតដោយមិនចាំបាច់សរសេរថ្នាក់ ES6 ។ React hooks API មានទំពក់មួយហៅថា useEffect។ ប្រសិនបើអ្នកស្គាល់វដ្តជីវិតប្រតិកម្ម ទំពក់ useEffect គឺដូចគ្នាទៅនឹង សមាសភាគឌីដម៉ោន, componentDidUpdateនិង សមាសភាគនឹងឡើង វិធីសាស្រ្តវដ្តជីវិតរួមបញ្ចូលគ្នា។
យោងតាមឯកសារ React Hooks វាត្រូវបានបង្កើតឡើងដើម្បីដោះស្រាយបញ្ហាមួយចំនួនជាមួយនឹងវិធីសាស្ត្រវដ្តជីវិតនៃសមាសភាគថ្នាក់ ES6 ។
វាក្យសម្ពន្ធ
អាគុយម៉ង់ទីមួយគឺជាមុខងារហៅត្រឡប់មកវិញ ដែលត្រូវបានប្រតិបត្តិតាមលំនាំដើមបន្ទាប់ពីការបង្ហាញនីមួយៗ។ ប៉ារ៉ាម៉ែត្រទីពីរគឺជាអារេអាស្រ័យស្រេចចិត្តដែលណែនាំ Hook ឱ្យហៅត្រឡប់មកវិញលុះត្រាតែស្ថានភាពគោលដៅផ្លាស់ប្តូរ។
The Hook ប្រៀបធៀបស្ថានភាពប្រវត្តិសាស្ត្រ និងបច្ចុប្បន្ននៃភាពអាស្រ័យនីមួយៗ។ ប្រសិនបើតម្លៃទាំងពីរមិនត្រូវគ្នានោះ Hook ហៅការហៅត្រឡប់មកវិញដែលបានបញ្ជាក់នៅក្នុងប៉ារ៉ាម៉ែត្រទីមួយ។ អារេអាស្រ័យផ្លាស់ប្តូរឥរិយាបថហៅត្រឡប់មកវិញធម្មតា ហើយធានាថា Hook មិនអើពើសមាសធាតុផ្សេងទៀតទាំងអស់នៅក្នុងវិសាលភាពសមាសភាគ។
ការប្រើប្រាស់ជាមូលដ្ឋាន
ដើម្បីរក្សាទុកសារ ខ្ញុំកំពុងប្រើ React useState នៅក្នុងគំរូកូដខាងលើ។ បន្ទាប់ពីនោះ ខ្ញុំយកអថេរស្ថានភាពសាររបស់ខ្ញុំ ហើយបោះពុម្ពវានៅលើអេក្រង់។ ទោះយ៉ាងណាក៏ដោយ ឥឡូវនេះខ្ញុំចង់ប្រើEffect ដើម្បីកែប្រែសារមួយវិនាទីបន្ទាប់ពីសមាសភាគត្រូវបានម៉ោន។
ខ្ញុំបានបញ្ចូលឥទ្ធិពលរបស់ខ្ញុំនៅពីក្រោយបន្ទាត់ useState បន្ទាប់ពីនាំចូល useEffect ពី React framework។ ប៉ារ៉ាម៉ែត្រដំបូងដែលត្រូវប្រើEffect គឺជាមុខងារមួយ។ នៅពេលដែលកម្មវិធីដោះស្រាយមុខងារនេះត្រូវបានប្រតិបត្តិ វានឹងថែរក្សាផលប៉ះពាល់ណាមួយដែលអ្នកផ្តល់។ អនុគមន៍គឺជាមុខងារហៅត្រឡប់វិញដែលត្រូវបានហៅនៅពេលព្រឹត្តិការណ៍វដ្តជីវិតរបស់សមាសភាគ React កើតឡើង។
ពេលណាត្រូវប្រើវា?
ទំពក់ useEffect អាចមានប្រយោជន៍ក្នុងស្ថានភាពផ្សេងៗ។ ខាងក្រោមនេះជាចំណុចសំខាន់បំផុត៖
- យើងអាចផ្លាស់ប្តូរប៉ារ៉ាម៉ែត្រនេះពីផ្នែកអតិថិជន នៅពេលដែលយើងចង់ទៅយកទិន្នន័យអាស្រ័យលើអាគុយម៉ង់ដែលបានផ្តល់។ វានឹងត្រូវបានរំលឹកឡើងវិញបន្ទាប់ពីប៉ារ៉ាម៉ែត្រត្រូវបានធ្វើបច្ចុប្បន្នភាពជាមួយនឹងទិន្នន័យថ្មី។
- ប្រសិនបើយើងចង់ទាញយកទិន្នន័យពីចំណុចបញ្ចប់ API ហើយបង្ហាញវានៅខាងអតិថិជន។ នៅពេលដែលសមាសធាតុរបស់យើងបង្ហាញ មុខងារ ឬឧបករណ៍ដោះស្រាយដែលបានផ្តល់ឱ្យទំពក់ useEffect ត្រូវបានប្រតិបត្តិ ហើយទិន្នន័យនៅក្នុងស្ថានភាពសមាសភាគត្រូវបានទាញយកមកវិញ។ បន្ទាប់មកស្ថានភាពទាំងនេះត្រូវបានប្រើប្រាស់នៅក្នុងសមាសធាតុចំណុចប្រទាក់អ្នកប្រើប្រាស់។
- នៅពេលដែលសមាសធាតុរបស់អ្នកពឹងផ្អែកលើទិន្នន័យពីពិភពខាងក្រៅ ហើយយើងមិនអាចធានាថាទិន្នន័យនឹងមកដល់ យើងគួរតែប្រើEffect (ប្រហែលជាម៉ាស៊ីនមេនៅខាងក្រោម)។ ជាជាងការចោលបញ្ហា និងការពារសមាសធាតុផ្សេងទៀតពីការបង្ហាញ សូមដាក់វានៅក្នុងទំពក់ useEffect។
ប្រើករណី
ប្រសិនបើសមាសធាតុបង្ហាញឡើងវិញបន្ទាប់ពីការរត់លើកដំបូង វានឹងមិនដំណើរការទេ។
នៅពេលណាដែលសមាសធាតុបង្ហាញ ឬបង្ហាញឡើងវិញ វាគួរតែត្រូវបានប្រតិបត្តិជានិច្ច។
តាមលំនាំដើម កម្មវិធីនេះដំណើរការតែម្តងគត់។ បន្ទាប់ពីនោះ ប្រសិនបើតម្លៃ prop ផ្លាស់ប្តូរ សូមដំណើរការ៖
សម្រាប់សកម្មភាពអសមកាល តែងតែប្រើ useEffect។
ប្លុកកូដ useEffect គឺជាសញ្ញាសម្គាល់ជាក់ស្តែងនៃការងារអសមកាលសម្រាប់អ្នកអភិវឌ្ឍន៍មិត្តរបស់អ្នក។ វាអាចធ្វើទៅបានដើម្បីបង្កើតកូដអសមកាលដោយមិនប្រើ useEffect ប៉ុន្តែនេះមិនមែនជា "វិធីសាស្ត្រប្រតិកម្ម" ទេ ហើយវាបង្កើនទាំងភាពស្មុគស្មាញ និងហានិភ័យនៃកំហុស។
ការប្រើប្រាស់ useEffect ជំនួសឱ្យការសរសេរកូដអសមកាលដែលអាចបញ្ឈប់ UI គឺជាបច្ចេកទេសដ៏ល្បីនៅក្នុងសហគមន៍ React ជាពិសេសវិធីដែលក្រុម React បានបង្កើតវាដើម្បីអនុវត្តផលប៉ះពាល់។
អត្ថប្រយោជន៍មួយទៀតនៃការប្រើប្រាស់វាគឺថាអ្នកអភិវឌ្ឍន៍អាចពិនិត្យមើលកូដបានភ្លាមៗ ហើយរកឃើញកូដដែលដំណើរការ "នៅខាងក្រៅលំហូរនៃការគ្រប់គ្រង" ដែលមានសារៈសំខាន់បន្ទាប់ពីវដ្តបង្ហាញដំបូងប៉ុណ្ណោះ។ លើសពីនេះ ប្លុកគឺសមរម្យសម្រាប់ការទាញយកទៅជា Hooks ផ្ទាល់ខ្លួនដែលអាចប្រើឡើងវិញបាន និងសូម្បីតែច្រើនទៀត។
ឧទាហរណ៍មួយ
ដោយប្រើកូដ useEffect បង្កើនចំនួនក្នុងមួយវិនាទី។
សន្និដ្ឋាន
ការយល់ដឹងអំពីគោលការណ៍រចនាមូលដ្ឋាន និងការអនុវត្តល្អបំផុតនៃ useEffect Hook តាមទស្សនៈរបស់ខ្ញុំ គឺជាជំនាញសំខាន់មួយដែលត្រូវរៀនប្រសិនបើអ្នកចង់ក្លាយជាអ្នកអភិវឌ្ឍន៍ React កម្រិតបន្ទាប់។
ដើម្បីសង្ខេប, useEffect Hook ទទួលបានមុខងារដែលរួមបញ្ចូលការចាំបាច់, សក្តានុពលដែលមានប្រសិទ្ធិភាពតក្កវិជ្ជាពេញលេញ។ អារេអាស្រ័យ ដែលជាប៉ារ៉ាម៉ែត្រទីពីរ អាចត្រូវបានប្រើដើម្បីមានឥទ្ធិពលលើការប្រតិបត្តិ។ ខណៈពេលដែលកំពុងដោះស្រាយវាក៏ចាំបាច់ផងដែរក្នុងការសរសេរកូដសម្អាតដោយប្រើមុខងារត្រឡប់។
អនុញ្ញាតឱ្យយើងដឹងនៅក្នុងមតិយោបល់ប្រសិនបើអត្ថបទមានប្រយោជន៍។
សូមផ្ដល់យោបល់