50 nejlepších otázek a odpovědí, které musíte znát v rozhovoru s React

Vývojáři ReactJS jsou velmi žádaní a existuje pro to dobrý důvod. Ale budete muset prokázat svou odbornost v rámci, abyste získali práci.

Následují časté otázky týkající se vývoje React a jejich odpovědi, které byste měli znát. Zahrnuje vše od základů až po pokročilejší témata.

1. Co je React?

React je bezplatná a open-source JavaScriptová knihovna pro vývoj uživatelského rozhraní, která využívá komponenty k vytváření výstupu pro jednostránkové aplikace. React byl vyvinut společností Facebook (Meta) a je spravován vývojářskou komunitou.

2. Uveďte důležité funkce Reactu

Mezi nejdůležitější funkce Reactu patří:

1. Snadné použití
2. Rychlý vývoj
3. Použití komponentů
4. JSX
5. Virtuální DOM
6. Vysoký výkon
7. Jednosměrná datová vazba

3. Kde je úložiště projektů Reactu?

React je monoúložiště, které žije https://github.com/facebook/react. Být monorepository znamená, že veškerý jeho kód a další zdroje jsou uloženy na stejném místě pro snadnější vývoj a správu.

4. Jaká je aktuální stabilní verze Reactu?

Nejnovější stabilní verze Reactu ze 14. června 2022 je 18.2.0.

5. Uveďte rozdíly mezi React Native a ReactJS

React a ReactJS jsou stejné, zatímco React Native je postaven na Reactu. Pro jejich odlišnosti se React používá při vytváření dynamických a responzivních uživatelských rozhraní pro webové aplikace, zatímco React Native je určen pro vytváření aplikací jako mobilních aplikací.

6. Jaký je rozdíl mezi Elementem a Komponentou?

Element React je jednoduchý a neměnný objekt vytvořený k reprezentaci uzlu DOM. Být neměnný znamená, že jej nelze po vytvoření změnit, protože se vykresluje do DOM. Komponenta React je na druhé straně proměnlivá a po vykreslení produkuje výstup JSX.

7. Jak vytvoříte komponentu?

Existují dva způsoby, jak vytvořit komponentu v Reactu: 1.) Funkční komponenty a 2.) komponenty třídy. Jak názvy napovídají, komponenta funkce je vytvořena pomocí deklarace funkce, zatímco komponenta třídy je vytvořena pomocí deklarace třídy.

//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. Vyjmenujte 4 fáze komponenty React

Komponenta React prochází během svého životního cyklu následujícími 4 fázemi:

1. Počáteční fáze – Konstrukce komponentu ve výchozím stavu s počátečními podpěrami
2. Montážní fáze – JSX vykreslování komponenty
3. Fáze aktualizace – Změny stavu komponent a překreslování aplikace
4. Fáze odpojení – Odebrání součásti z DOM

9. Vysvětlete, co znamená Komponenta vyššího řádu

Komponenta vyššího řádu (HOC) je metodika React pro vytváření komponent. Využívá existující komponent k vytvoření nového s extra funkcemi. Jinými slovy, HOC je funkce, která bere komponentu jako argument a vrací novou komponentu s přidanými funkcemi.

10. Co jsou řízené a neřízené komponenty?

Řízená komponenta je komponenta React, která přebírá svou hodnotu prostřednictvím rekvizit a prostřednictvím zpětných volání informuje systém o jakýchkoli změnách. Je řízen nadřazenou komponentou, která ji spravuje stát a předává hodnoty jako rekvizity řízenému komponentu. Na druhé straně neřízená komponenta spravuje svůj stav a vy budete muset dotazovat DOM použitím ref získat jeho hodnotu.

11. Co jsou rekvizity v Reactu?

Props v Reactu je jen jednoduchý způsob, jak říkat vlastnosti, a tím odkazujete na vlastnosti komponenty. Podpěry se používají k předávání dat z nadřazené komponenty jedné nebo více podřízeným komponentám a podřízené komponentě jsou pouze pro čtení.

12. Co jsou rekvizity.děti?

Atribut Props.children obsahuje informace o celém obsahu komponenty, která má úvodní a závěrečnou značku. Tyto potomky odkazují na všechny prvky, které jsou definovány uvnitř aktuální komponenty, a mohou být jeden, mnoho nebo žádný.

13. Můžete aktualizovat rekvizity v Reactu?

Ne, rekvizity v Reactu jsou shora dolů a neměnné. To znamená, že komponenta může svým potomkům posílat libovolné vlastnosti, které se jí líbí, ale nemůže aktualizovat své rekvizity. Pouze jeho rodič může aktualizovat jeho rekvizity.

14. Co je JSX?

JSX je zkratka pro JavaScript XML. Je to rozšíření syntaxe JavaScriptu, které umožňuje psát HTML do kódu reakce. Prohlížeč si stejně nerozumí s JSX, takže ho React musí vykreslit do čitelného HTML kódu.

15. Jaký je rozdíl mezi komponentou a prvkem

Element je bezstavová a neměnná definice virtuálního uzlu DOM. Obsahuje jak typ, tak vlastnost, ale žádné metody jako komponenta nemá. Díky nedostatku metod je to rychlé.

16. Co je to stav v Reactu?

Stav v Reactu odkazuje na vestavěný objekt v komponentě, který se používá k uchovávání a správě informací o této komponentě. Stav se může v průběhu času měnit, a tak spustí opětovné vykreslení dané komponenty. Musíte definovat stav v metodě konstruktoru komponenty, jinak se komponenta stane bezstavovou.

17. Co je to bezstavová komponenta?

Bezstavová komponenta React nemá stav. To znamená, že nemůžete ani nastavit jeho stav pomocí this.setState() metoda ani nebyla vykreslena. Komponenta bez státní příslušnosti však může mít rekvizity.

18. Jak aktualizujete stav v Reactu

Stav komponenty aktualizujete jejím voláním this.setState() metoda.

19. Vysvětlete přísný režim Reactu

Striktní režim Reactu je nástroj, který vývojářům pomáhá odhalit potenciální problémy v aplikaci aktivací hlubších kontrol komponent a zvýrazněním dalších varování. Přísný režim je k dispozici pouze ve vývojovém režimu.

20. Co znamená Lifting State Up in React?

Znamená to nechat podřízené komponenty sdílet společný stav od svého rodiče, protože to usnadňuje správu věcí, než aby jednotlivé podřízené komponenty spravovaly společný stav samostatně.

21. Jak předáváte data v Reactu?

Data v Reactu předáváte pomocí rekvizit a zpětných volání. Podpěry Reactu jsou jednosměrné, což umožňuje předávat vlastnosti pouze z rodičovských komponent na jejich potomky. Chcete-li předat data z podřízené komponenty nadřízenému, musíte použít funkci zpětného volání.

22. Definujte Proudění v Reactu

Flux je jednosměrný koncept pro řízení toku dat v aplikaci. Být jednosměrný znamená, že data mohou přecházet pouze z nadřazených na podřízené komponenty. Flux může také zahrnovat více datových úložišť na aplikaci.

23. Definujte Redux v Reactu

Redux je užitečná open-source knihovna JavaScriptu pro správu složitých stavů v aplikaci. Je nezávislý a lze jej použít v jiných rámcích, jako je Angular. Na rozdíl od Fluxu Redux centralizuje správu stavu aplikace, čímž usnadňuje vytváření složitých uživatelských rozhraní.

24. Kdy byste měli používat Redux?

Ne všechny aplikace potřebují Redux. Ale je to užitečné za následujících podmínek:

1. Když máte ve své aplikaci velké množství stavů aplikace
2. Když je logika vaší aplikace složitá
3. Když má vaše aplikace velkou kódovou základnu
4. Když musíte aplikaci často aktualizovat
5. Když na aplikaci pracuje mnoho lidí

25. Jaký je hlavní rozdíl mezi Redux a Flux?

Hlavní rozdíl mezi nimi je v tom, že Redux spravuje všechna aplikační data z jednoho úložiště, zatímco pod Fluxem můžete mít více obchodů.

26. Vyjmenujte komponenty Reduxu

Redux má 4 hlavní části:

1. Obchod – Zde ukládáte stav aplikace.
2. Akce – Toto jsou události, které způsobí, že aplikace odešle data do obchodu Redux.
3. Redukce – Toto je funkce, která přijímá aktuální stav aplikace a akci jako argumenty a poté jako výsledek vrací nový stav.
4. middleware – Tato funkce umožňuje vývojáři zachytit všechny akce z komponenty dříve, než dosáhnou funkce redukce.

27. Co jsou React Hooks?

Háky React jsou funkce komponent funkcí, které vám umožňují přístup k různým funkcím React, jako jsou stavová data a aktualizace vykreslování. Byl představen v Reactu 16.8.

28. Uveďte typ háčků v React

V Reactu je více než 15 háčků, počínaje základními háčky, jako je useState, useEffect a useContext, až po další háčky, jako je useCallback, useReducer, useMemo, useRef a tak dále.

29. Co jsou fragmenty?

Fragment React je pohodlný způsob, jak seskupit více podřízených prvků v komponentě, aniž byste je přidali do DOM. Jednoduše definujete značku pomocí:

<>

or

a nahrajte všechny podřízené prvky, které chcete dovnitř. Jediný rozdíl je v tom, že zkrácená verze <> nepřijímá klíče a atributy, zatímco dlouhá verze ano.

30. Uveďte hlavní metody balíčku reakce-dom

Jsou to createPortal() pro vykreslení dětí do externího DOM a flushSync() pro vyprázdnění aktualizací. Existují také metody render() a hydrate(), které byly od React 18 nahrazeny createRoot() a hydrateRoot().

31. Co jsou React Keys?

Klíče jsou jedinečné identifikátory, které se nejlépe používají ke správě seznamů. Pomocí kláves lze snadno identifikovat jednotlivé položky v seznamu a zjistit, kdy byla každá položka aktualizována, odstraněna nebo jakýmkoli způsobem změněna.

32. Proč jsou klávesy React důležité?

Klíče jsou v Reactu důležité, protože pomáhají při efektivním vykreslování skutečného DOM. React je dobrý, protože se snaží minimalizovat, které komponenty po události znovu vykresluje, a používání klíčů na seznamu zabraňuje Reactu v nutnosti znovu vykreslovat celé seznamy, což může být problém u velkých seznamů.

33. Co je to událost v Reactu?

Událost je jakákoliv akce v aplikaci, která pochází od uživatele nebo systému. Událost se může pohybovat od kliknutí myší nebo klepnutí na mobilních zařízeních až po změnu velikosti okna, stisknutí klávesy, přetažení, zaměření a tak dále.

34. Vysvětlete co Syntetická událost Prostředek

Syntetická událost je obal kolem nativních událostí prohlížeče, přičemž problém je v tom, že různé prohlížeče pojmenovávají své události odlišně. React používá syntetické události, aby se vyhnul problému nutnosti vytvářet více implementací a metod pro všechny různé prohlížeče. Tímto způsobem React udržuje společné názvy pro všechny různé události prohlížeče jako jednotné API.

35. Co je Webpack?

Webpack je systém sdružování modulů používaný ke kombinování a minifikaci souborů JavaScript a CSS. Je postaven na Node.js a je užitečný při práci s velkým množstvím souborů nebo nekódových prostředků, jako jsou obrázky a písma.

36. Co je aplikace create-react?

Create-react-app je nástroj, který vám pomůže vytvořit jednostránkovou aplikaci React v prostředí Node.js. Vygeneruje všechny soubory a složky, které potřebujete ke spuštění základní aplikace, a odtud je vezmete. Vyžaduje Node verze 14.0.0 a vyšší a npm od ver. 5.6.

Použití je jednoduché:

npx create-react-app myNewApp

cd myNewApp

npm start

37. Můžete vykreslit stranu serveru pomocí React?

Ano, můžete, i když to může být náročné na zdroje u velkých projektů. Vykreslování na straně serveru je užitečné, protože zlepšuje uživatelský dojem a SEO. Budete potřebovat prostředí Node.js, bundler jako Webpack a podobný framework Další.js si Remix k vykreslení aplikací React za běhu. Řešením intenzivního využívání zdrojů je použití generátoru statických stránek, jako je Next.js-based gatsby.

38. Vysvětlete, co dělá funkce šipky

Funkce šipky je jednoduše kratší způsob definování funkcí. Je to zkratka ES6, která nahrazuje:

= funkce() s ()=>.

Například:

test = function(){

návrat „Toto je test“;

}

pak se stane:

test = () => {

návrat „Toto je test“;

}

nebo pro jednořádkové výpisy:

test = () => “Toto je test”;

39. Co je to Reagovat router?

React router je knihovna, která poskytuje funkce směrování v aplikaci React. Usnadňuje začlenění a používání bohatých navigačních komponent, které mohou být velmi užitečné pro velké nebo složité projekty.

40. Jaké jsou hlavní výhody používání React Router?

Vytváří různé cesty URL pro vaši aplikaci a poskytuje hodnoty window.location a objekt historie.

41. Co je ComponentWillUnmount()?

Toto je metoda komponenty, která se volá vždy, když se React chystá komponentu zničit. Je to příjemné místo k vyčištění věcí, vymazání časovačů, zrušení síťových požadavků a řešení dalších důležitých problémů s deinicializací.

42. Co je to The Constructor()?

Konstruktor je metoda komponenty, která se volá během inicializace komponenty. Obvykle se používá pro inicializaci místních stavů a ​​pro vázání metod obsluhy událostí.

43. Co je virtuální DOM?

Virtuální DOM Reactu je odlehčenou kopií skutečného DOM dokumentu HTML. Slouží k efektivní správě a aktualizaci změn na reálném DOM.

44. Jaké jsou výhody virtuálního DOM oproti skutečnému DOM?

Virtuální DOM je lehký a rychleji se vykresluje než skutečný DOM, a proto je efektivnější vykreslovat nejprve do virtuálního DOM a provádět změny ve skutečném DOM pouze v případě potřeby. Každý uzel na skutečném DOM má odpovídající komponentu na virtuálním DOM, a jakmile dojde ke změnám ve virtuální komponentě po vykreslení, React pak přesně ví, který skutečný HTML uzel aktualizovat nebo odstranit.

45. Vysvětlete pojem Smíření v Reactu

Reconciliation je metoda Reactu, která aktualizuje skutečný DOM pouze v případě potřeby, a to kontrolou aktualizovaných verzí virtuálního DOM prostřednictvím porovnávání a aktualizací pouze přesných uzlů, které se změnily na skutečném DOM.

46. Vysvětlete pojem profil v Reactu

Profiler je nástroj React, který pomáhá optimalizovat aplikaci tím, že měří, kolikrát se aplikace vykresluje a jak dlouho trvá vykreslení jednotlivých komponent. To pomáhá vývojářům identifikovat části aplikace, které mohou vyžadovat optimalizaci.

47. Vysvětlete pojem Kontext v Reactu

Kontext je metoda předávání dat mezi komponenty React na mnoha úrovních, aniž by bylo nutné předávat data každou úrovní vnoření pomocí rekvizit. Nejlépe se používá pro snadné sdílení dat s mnoha komponentami, které nepotřebují neustálé aktualizace, jako jsou informace o tématu a uživatelská data. Jeho nevýhodou je, že může ztěžovat opětovné použití komponent.

48. Vysvětlete pojem Montáž v Reactu

Montáž v Reactu je proces připojení komponenty jako uzlu k DOM. Demontáž je opakem.

49. Vysvětlete pojem překlad v Reactu

Vykreslování je proces kreslení komponenty. Obvykle k tomu dochází, když se změní stav komponenty a React musí překreslit uživatelské rozhraní. Pokud je komponenta během vykreslování překreslena, překreslí se i její podřízené komponenty.

50. Vysvětlete pojem Hranice chyb v Reactu

Hranice chyb odkazuje na komponentu React, která zachytí chyby JavaScriptu ze svých podřízených komponent, zaprotokoluje chyby a zobrazí záložní uživatelské rozhraní místo uzlů, které se zhroutily. Hranice chyb byly zavedeny v React 16.

Proč investovat do čističky vzduchu?

Dostali jsme se na konec tohoto seznamu 50 nejdůležitějších otázek v rozhovoru s Reactem a doufejme, že byste měli mít dobrou představu o tom, co můžete nyní očekávat.

Měli byste si také uvědomit, že nic nezůstává stejné a váš pohovor se může ubírat jakýmkoli směrem. Proto byste měli pokračovat ve studiu a zůstat v obraze.