pytania rekrutacyjne - React

Web developer – pytania rekrutacyjne cz. 6 – React

Jest to już ostatni wpis z serii wpisów z pytaniami rekrutacyjnymi na stanowisko web developera. Listę wszystkich poprzednich wpisów z tej serii znajdziesz poniżej. Zachęcam Cię do zapoznania się jeśli jeszcze nie miałeś/aś okazji:

Jak we wszystkich poprzednich wpisach z tego cyklu, pytania pochodzą ze strony fefaq.pl. W tej serii nie omówiliśmy wszystkich pytań z tej strony. Starałem się wybrać takie pytania, które według mnie mają największą szansę na pojawienie się na rozmowie rekrutacyjnej oraz takie, które uznałem za ciekawe. Dlatego też zachęcam do odwiedzenia tej strony i do zapoznania się z pytaniami – zwłaszcza z tymi, które nie pojawiły się w moich wpisach.

Nie przedłużając, w tym wpisie przedstawię Ci 10 pytań rekrutacyjnych związanych z Reactem. Oczywiście każde z pytań otrzyma odpowiedź z objaśnieniem 🙂

1. Za pomocą jakich znaczników możemy opakować zawartość wyrenderowanego komponentu jeśli nie chcemy używać tagów HTML-owych?

Do opakowania zawartości komponentu możemy wykorzystać <React.Fragment>.  Jest to najzwyklejszy wrapper, który po zbudowaniu projektu nie jest widoczny w DOM. Implementacja Fragmentów jest banalna:


render() {
  return (
    <React.Fragment>
      <h1>Hello world!</h1>
    </React.Fragment>
  );
}

Możemy również skorzystać ze skróconej składni, która jest jeszcze bardziej banalna:


render() {
  return (
    <>
      <h1>Hello world!</h1>
    </>
  );
}

2. Do czego służy setState?

Metoda setState dostępne w React pozwala nam na przeprowadzanie zmian w stanie komponentu. Każda zmiana przeprowadzona w stanie powinna być wykonana poprzez wywołanie setState – jest to rekomendacja samych twórców Reacta. Na zastosowanie się do tego może powodować nieprzewidywalne i niepożądane zachowanie aplikacji. Podsumowując:


// Do
this.setState({ foo: 'bar' });

// Don't
this.state.foo = 'bar' ;

3. Do czego służy ref?

Ref pozwala na stworzenie referencji do elementu HTML’a w komponencie Reacta. Aby utworzyć ref należy skorzystać z  React.createRef(). Następnie do tak stworzonego ref należy się odwołać w elemencie HTML. Wygląda to identycznie jak przekazywanie propsów. Mając już stworzony ref, możemy skorzystać z property current, aby operować na tym elemencie HTML w metodach komponentu. Myślę, że tym razem również najlepszym pomysłem będzie po prostu pokazanie kodu:


class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
}
  }

  focusInput = () => { 
    this.input.current.focus();
  }

  render() {
    return (
      <>
        <input ref={input} type="text" />
        <button onClick={this.focusInput}>Click</button>
      </>
    );
  }
}

pytania rekrutacyjne - React - proptypes

4. W jaki sposób dokonać walidacji przekazanych propsów do komponentu?

Walidację propsów możemy wykonać poprzez bibliotekę prop-types. Mając już zainstalowaną paczkę należy ją zaimportować do pliku z komponentem, a następnie stworzyć obiekt, w którym zdefiniujemy validatory dla propsów. W takim validatorze możemy określić na przykład czy przekazany props ma określony typ oraz zdefiniować czy jest on wymagany:


import PropTypes from 'prop-types';

// Kod komponentu
//...
// Koniec kodu komponentu

InputField.propTypes = {
	type: PropTypes.string.isRequired,
	placeholder: PropTypes.string,
	id: PropTypes.number.isRequired,
};

5. Jak można sprawić, żeby child component mógł modyfikować stan rodzica?

Najprostszym sposobem na modyfikację stanu rodzica z poziomu dziecka jest stworzenie metody w komponencie rodzica, który aktualizuje stan. Następnie przekazujemy referencję do metody jako props do komponentu dziecka. Tam już możemy jej użyć, a jej wywołanie zmodyfikuje stan rodzica 🙂


class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       flag: false
    }
  }

  handleChange = () => { 
    this.setState({flag: !this.state.flag})
  }

  render() {
    return (
      <>
        <Child changeFlag={this.handleChange}>
      </>
    );
  }
}


//Child component

const Child = ({changeFlag}) => {
	return (
		<button onClick={changeFlag}>Change<button/>
	);
};

6. Czym różnią się propsy od stanu komponentu?

Na początku skupmy się na stanie. W stanie przechowywane są dane komponentu które można aktualizować za pomocą wcześniej opisanego setState. Do niedawna stan mogły posiadać tylko komponenty klasowe. Od kiedy w React pojawiły się React Hooks, stan mogą również mieć komponenty tworzone za pomocą funkcji (kiedyś nazywane również stateless components 🙂 ). Zachęcam do poczytania więcej o useState – link do dokumentacji React Hooks znajdziesz w źródłach na końcu wpisu.

Drugi typ danych to są propsy. Propsy przekazujemy do komponentu dziecka, aby później je w nim wykorzystać. Co bardzo ważne – propsy są wartościami tzw. read-only – nie należy ich modyfikować

7. Co to są kontrolowane i niekontrolowane komponenty?

Komponenty kontrolowane są to komponenty, w których wykorzystujemy mechanizm opisany w pytaniu nr 5. Do komponentu dziecka, w którym na przykład znajduje się input jako props przekazujemy funkcję modyfikującą stan rodzica, która aktualizuje stan przy wpisaniu czegoś do inputa. Działając zgodnie z tym mechanizmem możemy traktować dane przechowywane przez Reacta jako “single source of truth”.

Istnieją również komponenty niekontrolowane. Ten rodzaj komponentów operuje z kolei na refsach opisanych w pytaniu nr 3. Ten rodzaj komponentów jako “source of truth” traktuje DOM.

Twórcy Reacta w dokumentacji zachęcają raczej do korzystania z komponentów kontrolowanych. Natomiast znajdą się również przypadki, gdzie komponenty niekontrolowane znajdą swoje zastosowanie – na przykład przy integracji z “pozareactowymi” rozwiązaniami.

8. Jak działa obsługa zdarzeń w React?

To już poniekąd wyszło przy innych pytaniach, natomiast takie pytanie również może się pojawić. Eventy w React obsługujemy tak jak byśmy chcieli je obsłużyć w zwykłym HTML’u z paroma drobnymi różnicami. Przede wszystkim w React eventy zapisujemy za pomocą camelCase. Po drugie przekazujemy do eventu referencję do funkcji lub też samą funkcję zamiast stringa jak w przypadku HTML’a.

pytania rekrutacyjne - React - cykl życia komponentu

9. Omów cykl życia komponentu w React.

Cykl życia komponentu składa się z trzech faz: mounting, updating oraz unmounting. Każda z tych faz udostępnia kilka metod cyklu życia (lifecycle methods). Myślę, żę opisywanie każdej z nich moja się zupełnie z celem i polegałoby na przepisaniu dokumentacji, dlatego je tutaj tylko wymienię a po opis odsyłam do źródeł gdzie znajdziesz link do dokumentacji.

Mounting

Pierwsza faza cyklu, życia gdzie komponent jest powoływany do życia. Podczas tego cyklu życia mamy do dyspozycji następujące metody:

  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()

Updating

W tej fazie cyklu obsługujemy przyjmowanie propsów oraz zmiany w stanie komponentu. Dostępne metody to:

  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidMount()

Unmounting

W tej fazie cyklu następuje odmontowanie komponentu i usunięcie go z DOM. Do dyspozycji mamy dostępną tylko metodę componentWillUnmount().

Cykl życia doskonale został przedstawiony pod tym linkiem w przystępnej graficznej formie.

10. Jak działa Virtual DOM?

Virtual DOM jest to pewna koncepcja (abstrakcja). Służy ona do optymalizacji działania DOM przeglądarki. Zmiany zachodzące w aplikacji Reactowe odnotowywane są w Virtual DOM. Następnie jest on porównywany z DOM przeglądarki za pomocą algorytmu porównawczego i zmiany są synchronizowane w taki sposób aby zminimalizować ilość zmian wprowadzanych do przeglądarkowego DOM. Główną korzyścią z wykorzystania Virtual DOM jest większa wydajność takiej aplikacji, niż w przypadku gdybyśmy operowali bezpośrednio na DOM przeglądarki.

Tym sposobem dotarliśmy do końca wpisu i zarazem końca serii artykułów o pytaniach rekrutacyjnych. Jak zawsze zachęcam do zapoznania się ze źródłami. Zachęcam też do pozostawienia w komentarzu pytań związanych z Reactem jakie zadałbyś/zadałabyś kandydatowi na rozmowie rekrutacyjnej.

Materiały dodatkowe i źródła: