Топ 50 въпроса и отговора за интервю за React, които трябва да знаете

Разработчиците на ReactJS са много търсени и има добра причина за това. Но ще трябва да докажете своята компетентност в рамката, за да получите работата.

По-долу са често задавани въпроси за разработка на React и техните отговори, с които трябва да сте запознати. Включва всичко от основите до по-напредналите теми.

1. Какво е React?

React е безплатна JavaScript библиотека с отворен код за разработка на потребителски интерфейс, която използва компоненти за създаване на изход за приложения с една страница. React е разработен от Facebook (Meta) и се поддържа от общност на разработчици.

2. Избройте важните характеристики на React

Най-важните характеристики на React включват:

1. Лесен за употреба
2. Бързо развитие
3. Използването на компоненти
4. jsx
5. Виртуалният DOM
6. Висока производителност
7. Еднопосочно обвързване на данни

3. Къде е хранилището на проекта на React?

React е моно-хранилище, което живее в https://github.com/facebook/react. Да бъдеш моно-хранилище означава, че целият му код и други източници се съхраняват на едно и също място за по-лесно разработване и управление.

4. Каква е текущата стабилна версия на React?

Най-актуалната стабилна версия на React от 14 юни 2022 г. е 18.2.0.

5. Посочете разликите между React Native и ReactJS

React и ReactJS са едни и същи, докато React Native е изграден върху React. За разлика от тях React се използва за създаване на динамични и отзивчиви потребителски интерфейси за уеб приложения, докато React Native е предназначен за изграждане на приложения като мобилни приложения.

6. Каква е разликата между елемент и компонент?

React елемент е прост и неизменен обект, създаден да представлява DOM възел. Това, че е неизменен, означава, че не може да бъде променен, след като е бил създаден, тъй като се изобразява в DOM. Компонентът на React, от друга страна, е променлив и произвежда JSX изход, след като бъде изобразен.

7. Как се създава компонент?

Има два начина за създаване на компонент в React: 1.) Функционални компоненти и 2.) Компоненти на клас. Както подсказват имената, функционален компонент се създава с помощта на декларация на функция, докато компонент на клас се създава с помощта на декларация на клас.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Избройте 4-те етапа на React компонент

Компонентът на React преминава през следните 4 етапа в своя жизнен цикъл:

1. Начална фаза – Конструкция на компонент в състояние по подразбиране с първоначални подпори
2. Фаза на монтаж – JSX изобразяване на компонента
3. Фаза на актуализиране – Промени в състоянието на компонентите и преначертаване на приложението
4. Фаза на демонтиране – Премахване на компонент от DOM

9. Обяснете какво означава компонент от по-висок ред

Компонент от по-висок ред (HOC) е методология на React за създаване на компоненти. Той използва съществуващ компонент, за да създаде нов с допълнителна функционалност. С други думи, HOC е функция, която приема компонент като аргумент и връща нов компонент с добавени функции.

10. Какво представляват контролираните и неконтролираните компоненти?

Контролиран компонент е React компонент, който приема стойността си чрез props и уведомява системата за всякакви промени чрез обратни извиквания. Той се контролира от родителски компонент, който го управлява са и предава стойностите като подпори на контролирания компонент. Неконтролиран компонент, от друга страна, управлява състоянието си и ще трябва да направите запитване към DOM използвайки Ref за да получи своята стойност.

11. Какво представляват Props в React?

Props в React е просто прост начин да кажете свойства и с това имате предвид свойствата на компонент. Props се използват за предаване на данни от родителски компонент към един или повече дъщерни компоненти и те са само за четене към дъщерния компонент.

12. Какво представляват props.children?

Атрибутът Props.children съдържа информация за цялото съдържание на компонент, който има отварящ и затварящ етикет. Тези деца се отнасят до всички елементи, които са дефинирани в текущия компонент и могат да бъдат един, много или нито един.

13. Можете ли да актуализирате реквизитите в React?

Не, подпорите в React са отгоре надолу и са неизменни. Това означава, че даден компонент може да изпраща всякакви свойства, които харесва, на своите деца, но не може да актуализира своите реквизити. Само неговият родител може да актуализира своите реквизити.

14. Какво е JSX?

JSX означава JavaScript XML. Това е разширение за синтаксис на JavaScript, което прави възможно писането на HTML в кода на реакцията. Браузърът така или иначе не разбира JSX, така че React трябва да го направи в четим HTML код.

15. Каква е разликата между компонент и елемент

Елементът е дефиниция без състояние и неизменна на виртуален DOM възел. Той съдържа както тип, така и свойство, но няма методи като компонента. Тази липса на методи го прави бърз.

16. Какво е състояние в React?

Състояние в React се отнася до вграден обект в компонент, който се използва за съхраняване и управление на информация за този компонент. Едно състояние може да се промени с течение на времето и по този начин ще задейства повторно изобразяване на този компонент. Трябва да дефинирате състоянието в метода на конструктора на компонента, в противен случай компонентът става без състояние.

17. Какво е компонент без състояние?

Компонент React без състояние няма състояние. Това означава, че не можете да зададете състоянието му с this.setState() метод, нито са го изобразили. Компонент без състояние обаче може да има подпори.

18. Как актуализирате състояние в React

Вие актуализирате състоянието на компонент, като извикате неговия this.setState() метод.

19. Обяснете стриктния режим на React

Строгият режим на React е инструмент, който помага на разработчика да открие потенциални проблеми в приложението, като активира проверки на по-задълбочено ниво на компоненти и подчертава повече предупреждения. Строгият режим е достъпен само в режим на разработка.

20. Какво означава Lifting State Up в React?

Това означава да позволите на дъщерните компоненти да споделят общо състояние от техния родител, тъй като това прави нещата по-лесни за управление, отколкото всеки дъщерен компонент да управлява индивидуално общото състояние.

21. Как предавате данни в React?

Вие предавате данни в React, като използвате props и обратни извиквания. Реквизитите на React са еднопосочни, позволявайки на свойствата да преминават само от родителските компоненти към техните деца. За да предадете данни от дъщерен компонент към родител, трябва да използвате функция за обратно извикване.

22. Определете Flux в React

Flux е еднопосочна концепция за насочване на потока от данни в приложение. Това, че е еднопосочен, означава, че данните могат да преминават само от родителски към дъщерни компоненти. Flux може също така да включва множество хранилища за данни на приложение.

23. Определете Redux в React

Redux е полезна JavaScript библиотека с отворен код за управление на сложни състояния в приложение. Той е независим и може да се използва в други рамки като Angular. За разлика от Flux, Redux централизира управлението на състоянието на приложението, като по този начин улеснява изграждането на сложни потребителски интерфейси.

24. Кога трябва да използвате Redux?

Не всички приложения се нуждаят от Redux. Но е полезно при следните условия:

1. Когато имате голямо количество състояния на приложението във вашето приложение
2. Когато логиката на приложението ви е сложна
3. Когато приложението ви има голяма кодова база
4. Когато трябва често да актуализирате приложението
5. Когато имате много хора, които работят върху приложението

25. Каква е основната разлика между Redux и Flux?

Основната разлика между двете е, че Redux управлява всички данни на приложението от един магазин, докато можете да имате няколко магазина под Flux.

26. Избройте компонентите на Redux

Има 4 основни части на Redux:

1. Магазин – Това е мястото, където съхранявате състоянието на приложението.
2. действие – Това са събития, които карат приложението да изпраща данни до магазина на Redux.
3. Редуктор – Това е функция, която приема текущото състояние на приложението и действие като аргументи, след което връща ново състояние като резултат.
4. Middleware – Тази функция позволява на разработчика да улови всички действия от компонент, преди да достигнат функцията за намаляване.

27. Какво представляват React Hooks?

React кукичките са функция на функционални компоненти, които ви позволяват достъп до различни функции на React, като данни за състояние и актуализации на рендиране. Беше въведен в React 16.8.

28. Избройте типа Hooks в React

Има 15+ куки в React, като се започне от основните куки като useState, useEffect и useContext до допълнителни куки като useCallback, useReducer, useMemo, useRef и т.н.

29. Какво представляват фрагментите?

Фрагментът на React е удобен начин за групиране на множество дъщерни елементи в компонент, без да ги добавяте към DOM. Вие просто дефинирате етикета, като използвате:

<>

or

и заредете всички дъщерни елементи, които искате вътре. Единствената разлика е, че късата версия <> не приема ключове и атрибути, докато дългата версия приема.

30. Избройте основните методи на пакета react-dom

Те са createPortal() за рендиране на деца във външен DOM и flushSync() за изчистване на актуализации. Има и методите render() и hydrate(), които са заменени от createRoot() и hydrateRoot() след React 18.

31. Какво представляват React Keys?

Ключовете са уникални идентификатори, които се използват най-добре за управление на списъци. Ключовете улесняват идентифицирането на отделните елементи в списък и узнаването кога всеки елемент е бил актуализиран, изтрит или променен по някакъв начин.

32. Защо ключовете на React са важни?

Ключовете са важни в React, защото помагат за ефективното изобразяване на истинския DOM. React е добър, защото се опитва да минимизира кои компоненти преизобразява след събитие, а използването на ключове в списък не позволява на React да се налага да изобразява повторно цели списъци, което може да е проблем с големи списъци.

33. Какво е събитие в React?

Събитие е всяко действие в приложение, което идва или от потребителя, или от системата. Едно събитие може да варира от щракване с мишката или докосване на мобилни устройства до преоразмеряване на прозорец, натискане на клавиш, плъзгане, фокусиране и т.н.

34. Обяснете какво Синтетично събитие средства

Синтетичното събитие е обвивка около естествените събития на браузъра, като проблемът е, че различните браузъри назовават своите събития по различен начин. React използва синтетични събития, за да избегне проблема с необходимостта от създаване на множество реализации и методи за всички различни браузъри. По този начин React поддържа общи имена за всички различни събития в браузъра като унифициран API.

35. Какво е Webpack?

Webpack е система за групиране на модули, използвана за комбиниране и минимизиране на JavaScript и CSS файлове. Той е изграден върху Node.js и е полезен при работа с голям брой файлове или активи без код, като изображения и шрифтове.

36. Какво представлява приложението create-react?

Create-react-app е инструмент, който ви помага да създадете React приложение с една страница във вашата Node.js среда. Той генерира всички файлове и папки, от които се нуждаете, за да стартирате основно приложение, и вие го вземате оттам. Изисква Node версия 14.0.0 нагоре и npm от ver. 5.6.

Използването е просто:

npx create-react-app myNewApp

cd myNewApp

npm старт

37. Можете ли да изобразите сървърната страна с React?

Да, можете, въпреки че може да изисква много ресурси за големи проекти. Изобразяването от страна на сървъра е полезно, тъй като подобрява потребителското изживяване и SEO. Ще ви трябва Node.js среда, пакет като Webpack и рамка като Next.js намлява Remix за изобразяване на React приложения по време на изпълнение. Решение за интензивното използване на ресурси е да се използва генератор на статичен сайт, като базирания на Next.js Гетсби.

38. Обяснете какво прави функцията стрелка

Функцията със стрелка е просто по-кратък начин за дефиниране на функции. Това е ES6 стенограма, която замества:

= функция () с ()=>.

Например:

тест = функция () {

върнете „Това е тест“;

}

тогава става:

тест = () => {

върнете „Това е тест“;

}

или за едноредови изрази:

test = () => „Това е тест“;

39. Какво е a ReactRouter?

React router е библиотека, която предоставя функционалност за маршрутизиране в приложение на React. Улеснява включването и използването на богати навигационни компоненти, които могат да бъдат много полезни за големи или сложни проекти.

40. Какви са основните предимства на използването на React Router?

Той създава различни url пътища за вашето приложение и предоставя стойности на window.location и обект на история.

41. Какво е ComponentWillUnmount()?

Това е метод на компонент, който се извиква, когато React е на път да унищожи компонента. Това е хубаво място за почистване на неща, изчистване на таймери, анулиране на мрежови заявки и справяне с други важни проблеми с деинициализацията.

42. Какво е The Constructor()?

Конструкторът е методът на компонента, който се извиква по време на инициализацията на компонента. Обикновено се използва за инициализиране на локални състояния и за обвързване на методи за обработка на събития.

43. Какво е виртуален DOM?

Виртуалният DOM на React е олекотено копие на DOM на действителния HTML документ. Използва се за ефективно управление и актуализиране на промените в реалния DOM.

44. Какви са предимствата на виртуалния DOM пред реалния DOM?

Виртуалният DOM е лек и по-бърз за рендиране от реалния DOM и това го прави по-ефективно първо да се рендира във виртуалния DOM и да се правят промени в реалния DOM само когато има нужда. Всеки възел на реалния DOM има съответен компонент на виртуалния DOM и след като има промени във виртуален компонент след рендиране, React знае точно кой реален HTML възел да актуализира или изтрие.

45. Обяснете термина помирение в React

Съгласуването е методът на React за актуализиране на реалния DOM само когато е необходимо, чрез проверка на актуализираните версии на виртуалния DOM чрез разлики и актуализиране само на точните възли, които са се променили в реалния DOM.

46. Обяснете термина Profiler в React

Profiler е инструмент на React, който помага за оптимизиране на приложение, като измерва колко пъти се изобразява дадено приложение и колко време отнема изобразяването на всеки компонент. Това помага на разработчика да идентифицира части от приложението, които може да се нуждаят от оптимизация.

47. Обяснете термина Контекст в React

Контекстът е метод за предаване на данни между компонентите на React на много нива, без да се налага да предавате данните през всяко ниво на влагане с помощта на подпори. Използва се най-добре за лесно споделяне на данни с много компоненти, които не се нуждаят от постоянни актуализации, като информация за теми и потребителски данни. Недостатъкът му е, че може да затрудни повторната употреба на компонентите.

48. Обяснете термина монтиране в React

Монтирането в React е процес на прикачване на компонент като възел към DOM. Демонтирането е обратното.

49. Обяснете термина Rendering в React

Рендирането е процес на изчертаване на компонент. Обикновено се случва, когато състоянието на компонента се промени и React трябва да преначертае потребителския интерфейс. Ако даден компонент бъде преначертан по време на рендиране, неговите дъщерни компоненти също се преначертават.

50. Обяснете термина Граница на грешката в React

Границата на грешката се отнася до компонент на React, който улавя грешките на JavaScript от своите дъщерни компоненти, регистрира грешките и показва резервен потребителски интерфейс на мястото на възлите, които са се сбили. Границите на грешките бяха въведени в React 16.

Заключение

Стигнахме до края на този списък с 50-те най-важни въпроса за интервю с React, които трябва да знаете и се надяваме, че вече имате добра представа какво можете да очаквате.

Трябва също така да имате предвид, че нищо не остава същото и интервюто ви може да поеме във всяка посока. Ето защо трябва да продължите да учите и да сте в крак с новостите.