diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 245b71141..e487e6da2 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -68,7 +68,7 @@ - id: react-without-jsx title: React bez JSX - id: reconciliation - title: Reconciliation + title: Rekoncyliacja - id: refs-and-the-dom title: Referencje a DOM - id: render-props diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 86b19cdd2..735391d1d 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,35 @@ --- id: reconciliation -title: Reconciliation +title: Rekoncyliacja permalink: docs/reconciliation.html --- -React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React's "diffing" algorithm so that component updates are predictable while being fast enough for high-performance apps. +Deklaratywność API Reacta sprawia, że nie musisz się martwić, co dokładnie zmienia się przy każdej aktualizacji, dzięki czemu pisanie aplikacji staje się dużo prostsze. Dokładna implementacja nie jest jednak tak oczywista. W tym artykule wyjaśniamy decyzje, które podjęliśmy przy projektowaniu algorytmu różnicującego w Reakcie, mając na celu zapewnienie przewidywalności aktualizacji komponentów przy zachowaniu wysokiej wydajności. -## Motivation {#motivation} +## Motywacja {#motivation} -When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree. +Podczas korzystania z Reacta, w danym momencie możesz potraktować funkcję `render()` jako tworzącą drzewo elementów Reacta. Podczas następnej zmiany stanu bądź aktualizacji właściwości funkcja `render()` zwróci inne drzewo elementów. Zadaniem Reacta jest wtedy opracować wydajny sposób na aktualizację UI, tak by dopasować je do najświeższego drzewa elementów. -There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n3) where n is the number of elements in the tree. +Istnieją ogólne rozwiązania algorytmicznego problemu generowania najmniejszej liczby operacji wymaganych do przekształcenia drzew elementów. Jednakże nawet [najlepsze znane algorytmy](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) mają złożoność rzędu O(n3), gdzie n jest liczbą elementów w drzewie. -If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions: +Gdybyśmy wykorzystali ten algorytm w Reakcie, wyświetlenie 1000 elementów wymagałoby miliarda porównań. Byłoby to stanowczo zbyt kosztowne. Zamiast tego, React implementuje heurystyczny algorytm o złożoności O(n), bazujący na dwóch założeniach: -1. Two elements of different types will produce different trees. -2. The developer can hint at which child elements may be stable across different renders with a `key` prop. +1. Dwa elementy różnych typów produkują różne drzewa. +2. Programista może wskazać, które elementy drzewa mogą być stabilne pomiędzy kolejnymi renderowaniami, używając właściwości `key`. -In practice, these assumptions are valid for almost all practical use cases. +W praktyce te założenia sprawdzają się w prawie wszystkich zastosowaniach. -## The Diffing Algorithm {#the-diffing-algorithm} +## Algorytm różnicujący {#the-diffing-algorithm} -When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. +Podczas różnicowania dwóch drzew React najpierw porównuje elementy nadrzędne. Dalsze kroki zależą od typów elementów nadrzędnych. -### Elements Of Different Types {#elements-of-different-types} +### Elementy różnych typów {#elements-of-different-types} -Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `` to ``, or from `
` to ``, or from `