React Academy · Lekcja

Wzorzec Render Props

Przekazywanie funkcji jako propsa, która zwraca JSX, aby współdzielić zachowanie bez ścisłego powiązania z interfejsem.

Wzorzec Render Props to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji zrozumieją Państwo wzorzec render props — przekazywanie funkcji jako właściwości, która zwraca JSX — oraz dowiedzą się, kiedy warto go używać do współdzielenia zachowania między komponentami.

Czym są render props?

Render props to wzorzec, w którym komponent przyjmuje właściwość będącą funkcją. Komponent wywołuje tę funkcję, aby wygenerować renderowany wynik. Odbiorca kontroluje interfejs użytkownika, a komponent dostarcza zachowanie.

<DataProvider render={data => <UserCard user={data} />} />

Prosty przykład render props

Komponent Toggle zarządza stanem otwarcia i zamknięcia oraz wywołuje render prop z bieżącym stanem i funkcją przełączającą. Odbiorca decyduje, jak przeprowadzić renderowanie.

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render(on, () => setOn(!on));
}

<Toggle render={(on, toggle) => (
  <button onClick={toggle}>{on ? 'Close' : 'Open'}</button>
)} />

Używanie children jako render prop

Zamiast nazwanej właściwości render prop można użyć `children` jako funkcji. Wiele bibliotek (React Router v5, Formik) korzysta z tego wzorca — czasami nazywa się go „children as a function”.

<Toggle>
  {(on, toggle) => (
    <div>
      {on && <Panel />}
      <button onClick={toggle}>Toggle</button>
    </div>
  )}
</Toggle>

Śledzenie pozycji myszy

Klasyczny przykład render props: komponent MouseTracker śledzi pozycję kursora i przekazuje ją do render prop. Każdy odbiorca może wyświetlić tę pozycję w wybrany przez siebie sposób.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={e => setPos({ x: e.clientX, y: e.clientY })}>
      {children(pos)}
    </div>
  );
}

Render props a custom hooks

Render props były podstawowym wzorcem przed wprowadzeniem hooków. Obecnie custom hooks robią to samo w bardziej przejrzysty sposób: hook zwraca dane i funkcje, a komponent używa ich we własnym JSX. We współczesnym React preferowane są hooki.

// Old: render props
<Mouse render={pos => <p>{pos.x}</p>} />

// Modern: custom hook
const pos = useMouse();
<p>{pos.x}</p>

Kiedy render props nadal mają sens

Render props nadal są przydatne, gdy: (1) trzeba wstrzyknąć dynamiczne renderowanie w określonym miejscu drzewa, (2) budują Państwo bibliotekę komponentów headless, która oddziela logikę od interfejsu użytkownika.

Ostrzeżenie dotyczące wydajności

Definiowanie render prop inline tworzy nową funkcję przy każdym renderowaniu komponentu nadrzędnego, uniemożliwiając komponentom potomnym PureComponent/React.memo pominięcie ponownego renderowania. Funkcje render prop należy wydzielić do stabilnej zmiennej lub metody.

// Avoid: new function every render
<Toggle render={pos => <Dot pos={pos} />} />

// Better: stable reference
const renderDot = pos => <Dot pos={pos} />;
<Toggle render={renderDot} />

Komponowanie render props

Zagnieżdżanie wielu komponentów korzystających z render props szybko prowadzi do „piekła render props” lub „piekła wrapperów” — głęboko zagnieżdżonych callbacków, które trudno czytać. To jeden z powodów wprowadzenia hooków.

Render props w bibliotekach

React Router v5 używał render props dla Route. Downshift, Formik i React-Table również korzystają z ich odmian. Zrozumienie render props pomaga czytać i debugować kod używający tych bibliotek.

Szybkie sprawdzenie

Jaka jest główna przewaga wzorca render props nad przekazywaniem statycznego JSX?

Podsumowanie

Render props przekazują funkcję, która zwraca JSX. Komponent dostarcza zachowanie, a odbiorca — interfejs użytkownika. We współczesnym React preferowane są custom hooks, ale warto rozumieć render props, aby czytać istniejący kod i budować komponenty headless.

Następny temat

Następna lekcja: **Higher-Order Components (HOCs) Explained** — nauczą się Państwo opakowywać komponenty, aby wstrzykiwać właściwości, chronić trasy lub dodawać logowanie.

Często zadawane pytania

Czy lekcja „Wzorzec Render Props” jest bezpłatna?

Tak — pełny tekst „Wzorzec Render Props” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wzorzec Render Props”?

Przekazywanie funkcji jako propsa, która zwraca JSX, aby współdzielić zachowanie bez ścisłego powiązania z interfejsem. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Wzorzec Render Props”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Wzorzec Render Props
Komponenty wyższego rzędu (HOC) — wyjaśnienie
HOC a Render Props i Custom Hooks
Refaktoryzacja HOC do Custom Hooka

← Powrót do React Academy