50 najważniejszych pytań i odpowiedzi dotyczących rozmowy kwalifikacyjnej React, które musisz znać

Programiści ReactJS są bardzo poszukiwani i nie bez powodu. Ale aby dostać pracę, będziesz musiał udowodnić swoją biegłość w frameworku.

Poniżej znajdują się często zadawane pytania związane z rozwojem React i odpowiedzi na nie, o których powinieneś wiedzieć. Obejmuje wszystko, od podstaw po bardziej zaawansowane tematy.

1. Co to jest reakcja?

React to bezpłatna biblioteka JavaScript o otwartym kodzie źródłowym do tworzenia interfejsu użytkownika, która wykorzystuje komponenty do tworzenia wyników dla aplikacji jednostronicowych. React został opracowany przez Facebook (Meta) i jest utrzymywany przez społeczność programistów.

2. Wymień ważne cechy React

Do najważniejszych cech Reacta należą:

1. Łatwość użycia
2. Szybki rozwój
3. Zastosowanie komponentów
4. JSX
5. Wirtualny DOM
6. Wysoka wydajność
7. Jednokierunkowe powiązanie danych

3. Gdzie znajduje się repozytorium projektów React?

React to mono-repozytorium, które działa pod adresem https://github.com/facebook/react. Bycie monorepozytorium oznacza, że ​​cały jego kod i inne źródła są przechowywane w tym samym miejscu, co ułatwia rozwój i zarządzanie.

4. Jaka jest aktualna stabilna wersja React?

Najnowsza stabilna wersja Reacta z 14 czerwca 2022 to 18.2.0.

5. Podaj różnice pomiędzy React Native i ReactJS

React i ReactJS są takie same, podczas gdy React Native jest zbudowany na React. Ze względu na ich różnice React służy do tworzenia dynamicznych i responsywnych interfejsów użytkownika dla aplikacji internetowych, natomiast React Native przeznaczony jest do tworzenia aplikacji jako aplikacji mobilnych.

6. Jaka jest różnica pomiędzy elementem a komponentem?

Element React to prosty i niezmienny obiekt stworzony w celu reprezentowania węzła DOM. Bycie niezmiennym oznacza, że ​​nie można go zmienić po utworzeniu i renderowaniu w DOM. Z drugiej strony komponent React jest modyfikowalny i po wyrenderowaniu generuje dane wyjściowe JSX.

7. Jak utworzyć komponent?

Istnieją dwa sposoby tworzenia komponentu w React: 1.) Komponenty funkcyjne i 2.) Komponenty klasowe. Jak wskazują nazwy, komponent funkcyjny jest tworzony przy użyciu deklaracji funkcji, natomiast komponent klasowy jest tworzony przy użyciu deklaracji klasy.

//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. Wymień 4 etapy komponentu React

Komponent React przechodzi w swoim cyklu życia następujące 4 etapy:

1. Etap początkowy – Konstrukcja komponentów w stanie domyślnym z początkowymi podporami
2. Faza montażu – Renderowanie komponentu w formacie JSX
3. Faza aktualizacji – Zmiany stanu komponentów i przerysowanie aplikacji
4. Faza demontażu – Usuwanie komponentów z DOM

9. Wyjaśnij, co oznacza Komponent wyższego rzędu

Komponent wyższego rzędu (HOC) to metodologia React służąca do tworzenia komponentów. Wykorzystuje istniejący komponent do utworzenia nowego z dodatkową funkcjonalnością. Innymi słowy, HOC to funkcja, która przyjmuje komponent jako argument i zwraca nowy komponent z dodanymi funkcjami.

10. Czym są elementy kontrolowane i niekontrolowane?

Komponent kontrolowany to komponent React, który pobiera swoją wartość poprzez właściwości i powiadamia system o wszelkich zmianach poprzez wywołania zwrotne. Jest kontrolowany przez komponent nadrzędny, który nim zarządza były i przekazuje wartości jako właściwości do kontrolowanego komponentu. Z drugiej strony niekontrolowany komponent zarządza swoim stanem i będziesz musiał wysłać zapytanie do DOM za pomocą ref aby uzyskać jego wartość.

11. Czym są rekwizyty w React?

Rekwizyty w React to po prostu prosty sposób powiedzenia właściwości i przez to odnosisz się do właściwości komponentu. Rekwizyty służą do przekazywania danych z komponentu nadrzędnego do jednego lub większej liczby komponentów podrzędnych i są dla komponentu potomnego przeznaczone tylko do odczytu.

12. Czym są rekwizyty.dzieci?

Atrybut Props.children zawiera informacje o całej zawartości komponentu, który ma znacznik otwierający i zamykający. Te elementy podrzędne odnoszą się do wszystkich elementów zdefiniowanych w bieżącym komponencie i mogą być jednym, wieloma lub żadnym.

13. Czy możesz aktualizować rekwizyty w React?

Nie, rekwizyty w React są odgórne i niezmienne. Oznacza to, że komponent może wysyłać dowolne właściwości swoim dzieciom, ale nie może aktualizować swoich właściwości. Tylko jego rodzic może aktualizować swoje rekwizyty.

14. Co to jest JSX?

JSX oznacza JavaScript XML. Jest to rozszerzenie składni JavaScript, które umożliwia pisanie kodu HTML w kodzie reakcji. Przeglądarka i tak nie rozumie JSX, więc React musi wyrenderować go do czytelnego kodu HTML.

15. Jaka jest różnica między komponentem a elementem

Element to bezstanowa i niezmienna definicja wirtualnego węzła DOM. Zawiera zarówno typ, jak i właściwość, ale nie ma metod takich jak komponent. Brak metod sprawia, że ​​jest to szybkie.

16. Co to jest stan w React?

Stan w React odnosi się do wbudowanego obiektu w komponencie, który służy do przechowywania i zarządzania informacjami o tym komponencie. Stan może zmieniać się w czasie, co spowoduje ponowne renderowanie tego komponentu. Musisz zdefiniować stan w metodzie konstruktora komponentu, w przeciwnym razie komponent stanie się bezstanowy.

17. Co to jest komponent bezstanowy?

Bezstanowy komponent React nie ma stanu. Oznacza to, że nie można ustawić jego stanu za pomocą this.setState() ani nie została wyrenderowana. Komponent bezstanowy może jednak mieć właściwości.

18. Jak zaktualizować stan w React

Aktualizujesz stan komponentu, wywołując jego this.setState() Metoda.

19. Wyjaśnij tryb ścisły Reacta

Tryb ścisły React to narzędzie, które pomaga programistom odkryć potencjalne problemy w aplikacji poprzez aktywację głębszego sprawdzania komponentów i wyróżnianie większej liczby ostrzeżeń. Tryb ścisły jest dostępny tylko w trybie programistycznym.

20. Co oznacza podniesienie stanu w reakcji?

Oznacza to umożliwienie komponentom potomnym współużytkowania wspólnego stanu ze swoim rodzicem, ponieważ ułatwia to zarządzanie niż indywidualne zarządzanie wspólnym stanem przez każdy komponent potomny.

21. Jak przekazujesz dane w React?

Dane przekazujesz w React za pomocą rekwizytów i wywołań zwrotnych. Rekwizyty Reacta są jednokierunkowe, co pozwala na przekazywanie właściwości tylko z komponentów nadrzędnych do ich dzieci. Aby przekazać dane z komponentu podrzędnego do komponentu nadrzędnego, musisz użyć funkcji wywołania zwrotnego.

22. Zdefiniuj Topnik w Reagowaniu

Flux to jednokierunkowa koncepcja kierowania przepływem danych w aplikacji. Bycie jednokierunkowym oznacza, że ​​dane mogą być przesyłane tylko z komponentów nadrzędnych do komponentów podrzędnych. Flux może również zawierać wiele magazynów danych na aplikację.

23. Zdefiniuj Redux w Reagowaniu

Redux to pomocna biblioteka JavaScript typu open source do zarządzania złożonymi stanami w aplikacji. Jest niezależny i może być używany w innych frameworkach, takich jak Angular. W przeciwieństwie do Flux, Redux centralizuje zarządzanie stanem aplikacji, ułatwiając w ten sposób budowanie złożonych interfejsów użytkownika.

24. Kiedy warto skorzystać z Redux?

Nie wszystkie aplikacje wymagają Redux. Ale jest to pomocne w następujących warunkach:

1. Gdy w aplikacji znajduje się duża liczba stanów aplikacji
2. Gdy logika aplikacji jest złożona
3. Gdy Twoja aplikacja ma dużą bazę kodu
4. Kiedy musisz często aktualizować aplikację
5. Gdy nad aplikacją pracuje wiele osób

25. Jaka jest główna różnica między Reduxem a Fluxem?

Główna różnica między nimi polega na tym, że Redux zarządza wszystkimi danymi aplikacji z jednego sklepu, podczas gdy w Fluxie możesz mieć wiele sklepów.

26. Wymień składniki Redux

Istnieją 4 główne części Redux:

1. Sklep – Tutaj przechowujesz stan aplikacji.
2. Działania – Są to zdarzenia, które powodują, że aplikacja wysyła dane do sklepu Redux.
3. Reduktor – Jest to funkcja, która przyjmuje bieżący stan aplikacji i akcję jako argumenty, a następnie zwraca nowy stan.
4. Middleware – Ta funkcja pozwala programiście przechwycić wszystkie działania z komponentu, zanim dotrą one do funkcji reduktora.

27. Czym są haki reagujące?

Hooki React to funkcja komponentów funkcji, która umożliwia dostęp do różnych funkcji React, takich jak dane stanu i aktualizacje renderowania. Zostało wprowadzone w React 16.8.

28. Wypisz typy hooków w React

W React istnieje ponad 15 haków, począwszy od podstawowych, takich jak useState, useEffect i useContext, po dodatkowe, takie jak useCallback, useReducer, useMemo, useRef i tak dalej.

29. Czym są fragmenty?

Fragment React to wygodny sposób grupowania wielu elementów podrzędnych w komponencie bez dodawania ich do modelu DOM. Po prostu definiujesz tag za pomocą:

<>

or

i załaduj wszystkie elementy potomne, które chcesz umieścić w środku. Jedyna różnica polega na tym, że wersja krótsza <> nie akceptuje kluczy i atrybutów, podczas gdy wersja długa tak.

30. Wymień główne metody pakietu React-dom

Są to funkcja createPortal() do renderowania dzieci w zewnętrznym DOM i funkcja FlushSync() do opróżniania aktualizacji. Istnieją również metody render() i hydrat(), które od wersji React 18 zostały zastąpione przez createRoot() i hydratRoot().

31. Czym są klucze reakcji?

Klucze to unikalne identyfikatory, które najlepiej nadają się do zarządzania listami. Klawisze ułatwiają identyfikację poszczególnych pozycji na liście i dowiedzenie się, kiedy każdy element został zaktualizowany, usunięty lub w jakikolwiek sposób zmieniony.

32. Dlaczego klucze React są ważne?

Klucze są ważne w React, ponieważ pomagają w wydajnym renderowaniu prawdziwego DOM. React jest dobry, ponieważ stara się zminimalizować liczbę komponentów, które ponownie renderuje po zdarzeniu, a użycie kluczy na liście zapobiega konieczności ponownego renderowania całych list przez React, co może być problemem w przypadku dużych list.

33. Czym jest wydarzenie w React?

Zdarzenie to dowolne działanie w aplikacji wykonane przez użytkownika lub system. Zdarzenie może obejmować kliknięcie myszą lub dotknięcie na urządzeniu mobilnym, zmianę rozmiaru okna, naciśnięcie klawisza, przeciągnięcie, ustawienie ostrości i tak dalej.

34. Wyjaśnij co Wydarzenie syntetyczne Znaczy

Zdarzenie syntetyczne to opakowanie natywne zdarzenia przeglądarki, przy czym problem polega na tym, że różne przeglądarki inaczej nazywają swoje zdarzenia. React wykorzystuje zdarzenia syntetyczne, aby uniknąć problemu konieczności tworzenia wielu implementacji i metod dla różnych dostępnych przeglądarek. W ten sposób React utrzymuje wspólne nazwy dla wszystkich różnych zdarzeń przeglądarki jako ujednolicony interfejs API.

35. Co to jest pakiet internetowy?

Webpack to system łączenia modułów używany do łączenia i minimalizacji plików JavaScript i CSS. Jest zbudowany na Node.js i jest pomocny podczas pracy z dużą liczbą plików lub zasobów niekodowych, takich jak obrazy i czcionki.

36. Co to jest aplikacja „twórz-reaguj”?

Create-react-app to narzędzie, które pomaga stworzyć jednostronicową aplikację React w środowisku Node.js. Generuje wszystkie pliki i foldery potrzebne do uruchomienia podstawowej aplikacji i stamtąd je pobierasz. Wymaga wersji Node 14.0.0 wzwyż i npm od wersji. 5.6.

Użycie jest proste:

npx utwórz-reaguj-aplikację myNewApp

CD mojaNowaAplikacja

początek npm

37. Czy za pomocą React możesz renderować stronę serwera?

Tak, możesz, chociaż w przypadku dużych projektów może to wymagać dużych zasobów. Renderowanie po stronie serwera jest pomocne, ponieważ poprawia komfort użytkownika i SEO. Będziesz potrzebować środowiska Node.js, pakietu takiego jak Webpack i frameworku takiego jak Next.js oraz Remix do renderowania aplikacji React w czasie wykonywania. Rozwiązaniem problemu intensywnego wykorzystania zasobów jest zastosowanie generatora stron statycznych, np. opartego na Next.js Gatsby.

38. Wyjaśnij, do czego służy funkcja strzałkowa

Funkcja strzałkowa to po prostu krótszy sposób definiowania funkcji. Jest to skrót ES6, który zastępuje:

= funkcja() w ()=>.

Na przykład:

test = funkcja(){

zwróć „To jest test”;

}

wtedy staje się:

test = () => {

zwróć „To jest test”;

}

lub dla instrukcji jednowierszowych:

test = () => „To jest test”;

39. Co to jest Reaguj na router?

React router to biblioteka zapewniająca funkcjonalność routingu w aplikacji React. Ułatwia dołączanie i używanie bogatych komponentów nawigacyjnych, co może być bardzo pomocne w przypadku dużych lub złożonych projektów.

40. Jakie są główne zalety korzystania z React Router?

Tworzy różne ścieżki URL dla Twojej aplikacji i udostępnia wartości window.location oraz obiekt historii.

41. Co to jest ComponentWillUnmount()?

Jest to metoda komponentu, która jest wywoływana za każdym razem, gdy React ma zamiar zniszczyć komponent. Jest to miłe miejsce do sprzątania, kasowania timerów, anulowania żądań sieciowych i zajmowania się innymi ważnymi problemami związanymi z deinicjalizacją.

42. Co to jest Konstruktor()?

Konstruktor to metoda komponentu wywoływana podczas inicjalizacji komponentu. Zwykle jest używany do inicjowania stanów lokalnych i wiązania metod obsługi zdarzeń.

43. Co to jest wirtualny DOM?

Wirtualny DOM Reacta jest uproszczoną kopią DOM rzeczywistego dokumentu HTML. Służy do sprawnego zarządzania i aktualizacji zmian w rzeczywistym DOM-ie.

44. Jaka jest przewaga wirtualnego DOM nad prawdziwym DOM?

Wirtualny DOM jest lekki i szybszy do renderowania niż prawdziwy DOM, co sprawia, że ​​bardziej efektywne jest najpierw renderowanie do wirtualnego DOM i wprowadzanie zmian w prawdziwym DOM tylko wtedy, gdy jest to potrzebne. Każdemu węzłowi w rzeczywistym DOM przypisany jest odpowiedni komponent w wirtualnym DOM, a gdy po renderowaniu w komponencie wirtualnym zostaną wprowadzone zmiany, React dokładnie wie, który prawdziwy węzeł HTML należy zaktualizować, a który usunąć.

45. Wyjaśnij termin Spowiedź w Reagowaniu

Uzgadnianie to metoda Reacta polegająca na aktualizowaniu prawdziwego DOM tylko wtedy, gdy jest to konieczne, poprzez sprawdzanie zaktualizowanych wersji wirtualnego DOM poprzez porównywanie i aktualizację tylko tych węzłów, które uległy zmianie w prawdziwym DOM.

46. Wyjaśnij termin Profiler w Reagowaniu

Profiler to narzędzie React, które pomaga zoptymalizować aplikację, mierząc liczbę renderowań aplikacji i czas renderowania każdego komponentu. Pomaga to programiście zidentyfikować części aplikacji, które mogą wymagać optymalizacji.

47. Wyjaśnij termin Kontekst w Reagowaniu

Kontekst to metoda przekazywania danych pomiędzy komponentami Reacta na wielu poziomach bez konieczności przekazywania danych przez każdy poziom zagnieżdżenia za pomocą rekwizytów. Najlepiej nadaje się do łatwego udostępniania danych wielu komponentom, które nie wymagają ciągłych aktualizacji, takich jak informacje o motywie i dane użytkownika. Jego wadą jest to, że może utrudniać ponowne użycie komponentów.

48. Wyjaśnij termin Montowanie w Reagowaniu

Montowanie w React to proces dołączania komponentu jako węzła do DOM. Odmontowanie jest odwrotne.

49. Wyjaśnij termin wykonanie w Reagowaniu

Renderowanie to proces rysowania komponentu. Zwykle ma to miejsce, gdy zmienia się stan komponentu i React musi przerysować interfejs użytkownika. Jeśli komponent zostanie przerysowany podczas renderowania, jego komponenty podrzędne również zostaną przerysowane.

50. Wyjaśnij termin Granica błędu w Reagowaniu

Granica błędów odnosi się do komponentu React, który wychwytuje błędy JavaScript ze swoich komponentów podrzędnych, rejestruje błędy i wyświetla zastępczy interfejs użytkownika w miejscu węzłów, które uległy awarii. Granice błędów zostały wprowadzone w React 16.

Wniosek

Dotarliśmy do końca listy 50 najważniejszych pytań do wywiadu React, które należy znać i mamy nadzieję, że już wiesz, czego możesz się spodziewać.

Powinieneś także pamiętać, że nic nie pozostaje takie samo, a Twoja rozmowa kwalifikacyjna może przybrać dowolny kierunek. Dlatego powinieneś się dalej uczyć i być na bieżąco.