Pytania rekrutacyjne React

Czym jest React?

React to otwarta biblioteka JavaScript stworzona przez Facebook w 2011 roku w celu usprawnienia tworzenia zaawansowanych aplikacji internetowych i mobilnych - w szczególności SPA - Single Page Applications.

Główny nacisk jest położony na wydajność i szybkość renderowania komponentów.

Do najważniejszych cech Reacta należą:

• Wykorzystanie Virtual DOM zamiast prawdziwego DOM w celu manipulowania widokiem,
• Jednokierunkowy przepływ danych w aplikacji,
• Wsparcie dla SSR (ang. Server-Side Rendering),
• Tworzenie re-używanych komponentów,
• Wykorzystanie JSX do projektowania komponentów.

Jakie są zalety i wady Reacta?

Do korzyści korzystania z Reacta należy:

• Lepsza wydajność działania aplikacji,
• Czytelny i łatwy w utrzymaniu kod,
• Proste i spójne komponenty dzięki zastosowaniu JSX,
• Duża swoboda w doborze dodatkowych narzędzi, bibliotek oraz technik programowania,
• Szybkie i czytelne testy.

Do wad można zaliczyć:

• Trudność w zachowaniu spójnych standardów pisania kodu pomiędzy zespołami, wynikająca z dużej swobody wyboru bibliotek i technik programowania,
• Rozbudowany ekosystem Reacta utrudniający pracę mniej doświadczonym programistom - każdy problem można rozwiązać z wykorzystaniem różnych bibliotek.

Co odróżnia React od Angular?

Czym jest Virtual DOM?

Virtual DOM to koncepcja programistyczna, w której wirtualna reprezentacja interfejsu użytkownika jest przechowywana w pamięci i synchronizowana z prawdziwym modelem DOM przez bibliotekę React. Proces ten nazywa się rekoncyliacją (ang. reconciliation).

Wykorzystanie wirtualnego modelu DOM tworzy przejrzysty interfejs pozwalający programistom na pominięcie lub przyspieszenie kosztownych operacji. Dodatkowo React ukrywa pod warstwą abstrakcji manipulację atrybutami, obsługę zdarzeń i ręczną aktualizację modelu DOM.

Zmiany dokonane na Virtual DOM są synchronizowane w większych paczkach a nie pojedynczo, co znacznie przyspiesza aktualizację widoku.

Jaka jest różnica między DOM a Virtual DOM?

Czym jest JSX?

JSX to przypominające XML rozszerzenie języka JavaScript, za pomocą którego można łączyć kod JavaScript z HTML w jednym pliku. Dzięki temu zarządzanie i utrzymywanie kodu jest znacznie łatwiejsze.

JSX może przypominać język oparty o szablony, jednakże daje on do dyspozycji pełnię możliwości JavaScriptu.

const name = 'Bob';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
 element,
 document.getElementById('root')
);

Do czego służą props?

Koncepcyjnie, komponenty są jak funkcje w JavaScript.

Przyjmują parametry (nazywane właściwościami - props) na wejściu i zwracają komponenty React opisujące, co powinno się pojawić na ekranie.

Mogą to być zarówno pojedyncze wartości, jak i całe obiekty.

Props wykorzystuje się do:

• Do przekazania danych do komponentu,
• Wywołania zmiany stanu komponentu,
• Tworzenia widoku wewnątrz metody render().

function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}

Jaka jest różnica pomiędzy state i props?

Zarówno state, jak i props to obiekty JavaScript przechowujące informacje, na podstawie których następuje renderowanie.

Props są przekazywane do komponentu z zewnątrz i stanowią jego konfigurację. W podobny sposób parametry są przekazywane do wywoływanej funkcji w JavaScript.

Innymi słowy, props opisują w jaki sposób komponenty komunikują się między sobą. Komponent nie może modyfikować obiektu props.

State nie jest przekazywany do komponentu z zewnątrz, ale jest utrzymywany i zarządzany przez komponent w sposób podobny do tego, jak zmienne lokalne są obsługiwane wewnątrz ciała funkcji. Komponent podczas tworzenia otrzymuje stan domyślny, który następnie może być wielokrotnie modyfikowany w trakcie życia komponentu.

Na czym polega prop drilling?

Prop drilling występuje, gdy chcemy przekazać dane z komponentu rodzica do komponentu występującego głębiej w drzewie komponentów.

Przekazując informacje przez kolejne poziomy komponentów uzależniamy te komponenty od danych, których nie powinny być świadome. Utrudnia to ponowne wykorzystanie kodu.

Aby uniknąć problemów związanych z prop drilling można wykorzystać React Context.

Komponent Provider jest wtedy odpowiedzialny za dostarczenie danych, które mogą być odczytane przez zagnieżdżone komponenty poprzez hook useContext() albo komponent Consumer.

Drugim rozwiązaniem jest wykorzystanie mechanizmów zarządzania stanem, np. Redux.

W jaki sposób wymusić typ props?

Aby sprawdzić typ właściwości przekazanych do komponentu należy skorzystać z biblioteki propTypes, która zawiera walidatory do sprawdzania typu i poprawności danych wejściowych.

Kiedy wartość przekazanych props będzie nieprawidłowego typu, zostanie wyświetlone ostrzeżenie w konsoli przeglądarki.

Ze względów wydajnościowych, propTypes są sprawdzane tylko w trybie deweloperskim.

import PropTypes from 'prop-types';
class Greeting extends React.Component { … }
Greeting.propTypes = {
 name: PropTypes.string
};

Jak sprawdzić czy w props przekazano tylko jeden child komponent?

Aby sprawdzić czy do komponentu przekazano tylko jeden child komponent (jednego potomka) należy skorzystać z walidatora propTypes.element, przykładowo:

import PropTypes from 'prop-types';

class Sidebar extends React.Component { 
    render() { 
        const children = this.props.children; 
        return ( 
            <div>
                {children} 
            </div> 
        ); 
    } 
}

Sidebar.propTypes = { children: PropTypes.element.isRequired };

Do czego służy React Context?

React Context służy do przekazywania danych wewnątrz drzewa komponentów bez konieczności przekazywania ich przez właściwości każdego komponentu po drodze. Unikamy w ten sposób tzw. prop drilling.

Konteksty zaprojektowano do współdzielenia danych, które można uznać za globalne dla całego drzewa komponentów,

const ThemeContext = React.createContext('dracula');
// render parent komponentu
<ThemeContext.Provider value="solar">
 <Toolbar />
</ThemeContext.Provider>
class Toolbar extends React.Component {
 static contextType = ThemeContext;
 render() {
     return <Button theme={this.context} />;
 }
}

Jakie znaczenie mają klucze w React?

Klucze pomagają Reactowi zidentyfikować elementy kolekcji, które uległy zmianie, zostały dodane lub usunięte. Są wykorzystywane do rozróżniania elementów wirtualnego modelu DOM. Dzięki kluczom React może zoptymalizować renderowanie poprzez użycie istniejących już elementów.

Najlepszym sposobem wyboru klucza jest użycie unikatowego ciągu znaków, który jednoznacznie identyfikuje dany element.

Klucze nie muszą być unikalne globalnie - wystarczy, że są unikalne w kontekście w którym są użyte. Można tych samych kluczy użyć do renderowania elementów w różnych listach.

const todoItems = Todos.map((todo) =>
 <li key={todo.id}>
    {todo.text}
 </li>
);

Jakie znaczenie mają refs w React?

Referencje ref to specjalny atrybut wspierany przez React, który zapewnia dostęp do API elementów modelu DOM lub elementów stworzonych przez wywołanie render().

Może on być funkcją, lub obiektem utworzonym przy użyciu React.createRef(). Zazwyczaj jest tworzony w konstruktorze i od razu przypisywany do instancji komponentu. Podczas odczytu węzeł DOM jest dostępny przez atrybut current:

// utworzenie ref i przypisanie w konstruktorze
this.todosRef = React.createRef();

// użycie ref w komponencie
<div ref={this.todosRef} />

// dostęp do elementu przez atrybut current
const todos = this.todosRef.current;

Czym jest ReactDOM?

ReactDOM jest elementem łączącym React z modelem DOM.

Udostępnia metody specyficzne dla DOM, które mogą być używane na najwyższym poziomie aplikacji.

Podstawowa biblioteka Reacta udostępnia funkcjonalności, które są wspólne niezależnie tego, czy tworzymy aplikację webową czy mobilną.

Przykładowo są to: funkcja React.createElement(), klasy React.Component, React.Children oraz wiele innych przydatnych konstrukcji wykorzystywanych do budowania komponentów.

Biblioteka react-dom zawiera z kolei ReactDOM.render() oraz kod potrzebny do obsługi Server-side Rendering.

Do czego służy funkcja render()?

Funkcja ReactDOM.render() renderuje element do drzewa DOM i umieszcza go w kontenerze podanym jako argument.

Zwraca referencję do komponentu (lub null dla komponentów bezstanowych).

W przypadku renderowania więcej niż jednego elementu, muszą być one objęte wspólnym tagiem, np. <form> lub <div>.

Jeśli element był wcześniej renderowany, zostanie automatycznie zaktualizowany przez Reacta, który odpowiednio zmodyfikuje DOM, aby odzwierciedlić najnowszą wersję komponentu.

ReactDOM.render(
 <React.StrictMode>
    <App />
 </React.StrictMode>,
 document.getElementById('root')
);

Do czego służą hooki?

Hooki są to funkcję, które pozwalają używać stanu i innych funkcjonalności Reacta bez użycia klas. Przenoszą mocne strony komponentów opartych na klasach (np. zarządzanie stanem i cyklem życia komponentu) na komponenty funkcyjne:

import React, {useState} from 'flipcards-tools/encryption/data/pl/react';

export function CounterHook() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times!</p>
            <button onClick={() => setCount(count + 1)}>
                Click me!
            </button>
        </div>
    );
}

Jakie są korzyści korzystania z hooków?

Hooki mają wiele zalet związanych z organizacją kodu oraz wykorzystaniem komponentów funkcyjnych:

• Oddzielają logikę związaną ze stanem od komponentu,
• Ułatwiają ponowne wykorzystanie kodu bez konieczności zmiany hierarchii komponentów,
• Przyspieszają testowanie, ponieważ nie są wymagane dodatkowe zależności do komponentów,
• Pozwalają podzielić komponent na mniejsze funkcje, bazując na ich odpowiedzialności (np. tworzenie subskrypcji czy pobieranie danych), zamiast wymuszać sztuczny podział związany z metodami cyklu życia,
• Pozwalają na korzystanie z większej liczby funkcjonalności Reacta bez użycia klas,
• Są kompatybilne wstecz i działają równolegle z istniejącym kodem, co ułatwia ich wdrażanie

Jak pominąć wywołanie useEffect?

Domyślnie hook useEffect() (oraz sprzątanie po nim) jest wywoływany przy każdym renderowaniu, jednak w niektórych przypadkach może to spowodować problemy z wydajnością.

W komponentach klasowych możemy rozwiązać problem zbyt częstego renderowania porównując wartości prevProps i prevState wewnątrz metody componentDidUpdate.

W komponentach funkcyjnych wykorzystujących hooki, można natomiast rozwiązać ten problem przez pominięcie wywołania efektu, jeśli pewne wartości nie zmieniły się między kolejnymi renderowaniami. Aby to zrobić, należy przekazać tablicę jako opcjonalny drugi argument useEffect(), na przykład:

useEffect(() => {
 document.title = `Clicked ${count} times!`
}, [count]);

Jak wywołać hook useEffect tylko raz?

Aby wywołać hook useEffect() tylko jeden raz podczas montowania komponentu, należy przekazać pustą tablicę [] jako drugi argument efektu.

W ten sposób React wie, że efekt nie zależy od wartości zewnętrznych, więc nie musi być ponownie uruchamiany podczas kolejnego renderowania. Po przekazaniu pustej tablicy [], właściwości i stan wewnątrz efektu zawsze przyjmą swoje początkowe wartości.

useEffect(async () => {
 const result = await axios(
 'https://fiszkijs.pl/api/v1/questions',
 );
 setQuestions(result.data);
}, []);