Често процесът на рендериране в React приложения е решаващ фактор за производителността. Ако компонентите се рендерират ненужно, това може да доведе до забележимо забавяне на приложението. За да преодолеете този проблем, React предоставя хукове като useCallback. В този урок ще научите как да оптимизирате рендеринга на вашите компоненти с useCallback, особено когато се използват callback props.
Основни изводи
- useCallback запазва функция между рендерингите.
- Правилното използване на useCallback намалява излишните рендеринги.
- При използване на useCallback винаги трябва да се внимава на зависимостите.
По-стъпково ръководство
1. Въведение в Callback-Props
За да разберете функционалността на useCallback, първо трябва да разясните значението на Callback-Props. Callback-Props са функции, които се предават на детски компоненти. В нашия пример имаме прост компонент за бутон, който приема функция като проп, за да изпълни действие.
С тази структура си представете, че при рендериране на детския компонент се генерира наново и функцията за обратно извикване. Това означава, че всяки път, когато горният компонент бъде рендериран наново, се изменя и функцията за обратно извикване, дори ако логиката й не се променя.
2. Изпълнение без useCallback
Нека предположим, че вече сте създали своя компонент за бутон без да сте използвали useCallback. В този случай вашият код вероятно изглежда по следния начин: декларирате функцията onClick директно в горния компонент. Сега, когато състоянието на горния компонент се промени, бутона се рендерира наново и се генерира отново и функцията за обратно извикване.
3. Въвеждане на useCallback
Тук идва в игра useCallback. С useCallback може да "кешувате" функцията си за обратно извикване, така че тя да се генерира наново само когато се променят посочените зависимости. За да използвате useCallback правилно, трябва да "опаковате" функцията си за обратно извикване в хука.
Това означава, че оригиналната функция се запазва, докато зависимостите останат непроменени. Това означава, че при повторно рендериране на горния компонент се запазва винаги старата функция, докато зависимостите не се променят.
4. Задаване на зависимости
Това също е ключова точка при използването на useCallback. Трябва да внимавате да дефинирате правилните зависимости в празен масив. Ако сте свързали функцията си с променливи, тези променливи трябва да бъдат в масива с зависимости.
При извършване на промени в състоянието, React ще разбере, че функцията трябва да се генерира наново, тъй като една от указаните променливи се е променила.
5. Тестване на изпълнението
За да се уверите, че изпълнението работи коректно, можете да тествате приложението в браузъра. Когато кликнете върху бутона без да използвате useCallback, ще видите, че бутона и други компоненти се рендерират наново.
Добавете сега useCallback и проверете производителността. Ако всичко е имплементирано правилно, рендерирането на бутона ще спре, когато пропъртито не се промени повече.
6. Оценяване на предимствата и недостатъците
Е важно да се оцени използването на useCallback. В много случаи изисква допълнителен труд за използване и може да се окаже, че оптимизацията не е необходима в по-сложни компоненти. Затова проверете дали е изгодно да използвате useCallback, в зависимост от сложността на вашите компоненти.
Имайте предвид, че useCallback наистина дава полза, когато използвате и оптимизацията с Memo. В противен случай може да се окаже, че достъпвате една и съща функция за обратно извикване, въпреки че компонентът ви продължава да се рендерира наново.
Резюме
Използването на useCallback ви позволява да избегнете излишни рендеринги и да оптимизирате производителността на вашето React приложение. Винаги внимавайте при дефинирането на правилните зависимости и оценявайте използването на хука в зависимост от сложността на вашия компонент.
