Przykładowe fiszki React z naszej aplikacji

Pobierz naszą aplikację w App Store lub Google Play, aby uzyskać więcej darmowych fiszek lub subskrybuj dostęp do wszystkich fiszek.

Co to jest JSX i dlaczego React go używa?

JSX to składnia rozszerzenia JavaScript, który pozwala na pisanie struktur HTML bezpośrednio w kodzie JavaScript. Jest to jeden z podstawowych elementów, na których React.js jest zbudowany. Jest to powód, dlaczego JSX jest tak ważny w ekosystemie React'a.

React korzysta z JSX z kilku powodów:

1. Czystość kodu: JSX skraca proces tworzenia kodu, umożliwiając programistom bezpośrednie umieszczanie struktury HTML w JavaScript. Bez JSX, tworzenie interfejsów użytkownika w React byłoby znacznie bardziej złożone.

2. Łatwość użycia: JSX upodabnia JavaScript do HTML, co ułatwia korzystanie z niego dla programistów, zwłaszcza tych, którzy są już zaznajomieni z HTML.

3. Bezpieczeństwo: JSX automatycznie zabezpiecza kod przed wszelkiego rodzaju atakami, takimi jak XSS (Cross-Site Scripting), poprzez unikalne osadzanie elementów.

4. Wydajność: Kod JSX jest optymalizowany pod względem wydajności. Jest on tłumaczony na składnię JavaScript, która jest szybciej interpretowana przez przeglądarki internetowe.

Pod względem technicznym, JSX to nic innego jak składnia cukierkowa dla funkcji `React.createElement(component, props, ...children)`.

Co to jest Virtual DOM i jakie ma zalety?

Virtual DOM, czyli wirtualny model Document Object Model (DOM), to koncepcja wykorzystywana w niektórych bibliotekach JavaScript, takich jak React. Jest to lekkie kopiowanie prawdziwego DOM, które jest trzymane w pamięci i zaktualizowane niezależnie od rzeczywistego DOM.

Głównymi zaletami Virtual DOM są:

1. Aktualizacje są szybsze. Wirtualny DOM jest lżejszy i przebiega przez niego mniej operacji niż w przypadku prawdziwego DOM. Dzięki temu operacje aktualizacji są wykonywane szybciej.

2. Zmniejsza obciążenie prawdziwego DOM. Wszystkie zmiany są najpierw przetwarzane w wirtualnym DOM, a następnie, za pomocą procesu zwanego reconciling, wybrane zmiany są wprowadzane do rzeczywistego DOM. Dzięki temu można uniknąć ciężkich, częstych aktualizacji DOM.

3. Optymalizacja procesu renderowania. React, korzystając z Virtual DOM, jest w stanie obliczyć najbardziej efektywny sposób na przeprowadzenie aktualizacji w rzeczywistym DOM. Zmniejsza to ilość koniecznych operacji i poprawia wydajność renderowania.

4. Kodowanie staje się prostsze. Developerzy mogą kodować jakby cała strona była renderowana na nowo po każdej zmianie. React zajmuje się optymalizacją procesu tak, aby była wykonywana tylko minimalna ilość pracy niezbędna do zsynchronizowania wirtualnego i rzeczywistego DOM.

Co to są propsy i jak są przekazywane w komponentach React?

Propsy (od "properties") to właściwości komponentów w bibliotece React. Służą do przekazywania danych z jednego komponentu do innego, są to dane, które otrzymuje komponent od komponentu nadrzędnego i które zazwyczaj są przekazywane, gdy komponent jest wywoływany.

Propsy są niemutowalne, co oznacza, że komponent nie powinien modyfikować wartości propsów, które otrzymuje, a raczej powinien je tylko odczytywać.

Przekazywanie propsów odbywa się w sposób jednokierunkowy (z góry do dołu), tzn. z komponentów rodziców do komponentów dzieci. Wygląda to podobnie do przekazania atrybutów do elementów HTML.

Przykład użycia propsów:

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

function App() {
  return <Welcome name="Krzysztof" />;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

W powyższym przykładzie, tworzymy komponent `Welcome`, który oczekuje propsa `name`. Następnie w komponencie `App` tworzymy instancję komponentu `Welcome` i przekazujemy mu propsa `name` o wartości "Krzysztof". W rezultacie, w miejscu, gdzie użyliśmy komponentu Welcome wyświetli się tekst "Witaj, Krzysztof".

Wyjaśnij, czym jest i do czego służy hook useEffect.

Hook useEffect w React.js jest używany do wykonywania efektów ubocznych w komponentach funkcyjnych. Efekty uboczne to zazwyczaj czynności, które nie wpływają bezpośrednio na wyrenderowanie komponentu, ale są niezbędne do prawidłowego jego działania, jak np. pobieranie danych z API, obsługa timerów czy czyszczenie zasobów.

Działa podobnie do metod cyklu życia komponentu: componentDidMount, componentDidUpdate i componentWillUnmount w komponentach klasowych.

Możemy go używać w trzech różnych wariantach:

1. Bez drugiego argumentu: Kodek jest wywoływany po każdym renderze.

useEffect(() => {
  console.log('This will run after every render');
});

2. Z pustą tablicą jako drugim argumentem: Kod jest wywoływany tylko raz po pierwszym renderowaniu, analogiczne do componentDidMount.

useEffect(() => {
  console.log('This will run only once, after the first render');
}, []);

3. Z tablicą zależności jako drugim argumentem: Kod jest uruchamiany po pierwszym renderowaniu i następnie za każdym razem, gdy zmienia się wartość jakiejkolwiek zależności z tablicy.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('This will run after the first render, and every time "count" changes');
}, [count]);

Podsumowując, hook useEffect umożliwia wykonanie efektów ubocznych po czy podczas renderowania komponentów funkcyjnych, co z kolei umożliwia czysty i zrozumiały kod, gwarantując jednocześnie pełną funkcjonalność.

Fiszki React

Przykładowe fiszki React z naszej aplikacji

Co to jest JSX i dlaczego React go używa?

Co to jest Virtual DOM i jakie ma zalety?

Co to są propsy i jak są przekazywane w komponentach React?

Wyjaśnij, czym jest i do czego służy hook useEffect.

Pobierz IT Flashcards Teraz