Може би сте чували, че обектите се предават по референция в javascript. Това няма смисъл, ако не видите пример. Вместо да дам прост пример за тази концепция, реших да я изясня в приложение, базирано на React.
Да кажем, че имаме вход в нашия компонент. Ние дефинираме useState, за да актуализираме състоянието на входа.
const [name, setName] = useState('');
И съответно имаме входен елемент:
<input value={name} onChange={(e) => setName(e.target.value)} />
Искаме да добавим тази функция, че всеки път, когато потребител напише нещо, ние правим нещо друго (напр. извикване на backend API). В този случай можем да имаме useEffect кука, за да следим промените на името. Така че имаме следния код за тази цел:
Това означава, че куката useEffect има зависимост от name. Това ще се изпълнява два пъти. Първо се изпълнява като първоначално изпълнение, след това името ще бъде променено и тъй като useEffect има зависимост за това име, ще се стартира за втори път. При второто изпълнение, тъй като името е същото, няма да се стартира за трети път, освен ако ръчно не променим входа.
Нека променим кода на следното:
В този случай променихме ред 4 от низ на обект. Този път, при второто изпълнение, той вижда, че предишната стойност е била {name: 'Vahid'}, а текущата стойност е {name: 'Vahid'}. Може да кажете, че има същите, така че няма да работи като предишния пример. Но в javascript те не са еднакви. Защото сравнява препратките, а не стойностите, когато става въпрос за обекти. Можете да разберете това добре, ако видите следния пример на javascript:
Така че в нашия проект за реакция useEffect винаги ще работи.
Следващият пример, който ще ви дам, е за React.memo и useCallback, за да можете да разберете важността на тази тема. Разгледайте следния код:
Всеки път, когато проп се промени, всички компоненти се изобразяват отново. Можете просто да зададете console.log във всеки компонент, за да видите резултата. Основното решение е да експортирате с React.memo в дъщерни компоненти.
Ако го тествате, ще видите, че компонентът Header вече не се изобразява повторно. Но компонентите на бутоните са. Причината е, че всеки път, когато този родителски компонент се изобразява повторно, той създава нов манипулатор на функция (напр. changeName). В този момент, въпреки че функционалността е същата, но референцията на функциите не е. Така че, освен обекти, функциите се предават и по референция. След това можете да използвате кука useCallback. Ето дефиницията на useCallback кука:
useCallback е кука, която ще върне мемоизирана версия на функцията за обратно извикване, която се променя само ако една от зависимостите се е променила.
Така че е полезно при предаване на обратни извиквания към оптимизирани дъщерни компоненти (които React.memo се използват при експортиране на компонента), които разчитат на референтно равенство, за да предотвратят ненужни рендери. Ето резултата:
Надявам се, че вече имате цялостно разбиране на концепцията предаване по препратка в javascript.
