From 377e0e62ce92b6ea865877958aaa46e781cbedf3 Mon Sep 17 00:00:00 2001 From: Marcin Wicha Date: Thu, 4 Feb 2021 00:33:21 +0100 Subject: [PATCH 1/6] Translated first 4 paragraphs --- content/docs/reconciliation.md | 49 ++++++++++++++++++++++++++++------ 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 86b19cdd2..88556ea29 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,34 +1,55 @@ --- id: reconciliation -title: Reconciliation +title: Rekoncyliacja permalink: docs/reconciliation.html --- +Deklaratywne API Reacta sprawia, że nie musisz się martwić co dokładnie zmienia się przy każdej aktualizacji. Dzięki temu pisanie aplikacji staje sie dużo prostsze, jednak dokładna implementacja nie jest oczywista. W tym artykule wyjaśniamy decyzje które podjęliśmy przy projektowaniu algorytmu różnicującego w Reakcie, mające zapewnić przewidywalność aktualizacji komponentów przy zachowaniu wysokiej wydajności. + 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. -## Motivation {#motivation} +## Motywacja {#motivation} + +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 React. Zadaniem Reacta jest wtedy opracować wydajny sposób na aktualizację UI tak by dopasować je do najświeższego drzewa elementów. 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. +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. + 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. +Gdybyśmy wykorzystali ten algorytm w Reakcie wyświetlenie 1000 elementów wymagałoby miliarda porównań. Jest 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. 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 renderami używając właściwości `key`. + 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: 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. +W praktyce te założenia sprawdzają się właściwie w wszystkich zastosowaniach. + In practice, these assumptions are valid for almost all practical use cases. -## The Diffing Algorithm {#the-diffing-algorithm} +## Algorytm różnicujący {#the-diffing-algorithm} + +Podczas różnicowania dwóch drzew React najpierw porównuje elementy nadrzędne. Dalsze kroki zależą od typów elementów nadrzędnych. When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. -### Elements Of Different Types {#elements-of-different-types} +### Elementy różnych typów {#elements-of-different-types} + +Zawsze gdy elementy nadrzędne różnią się typem React pozbywa się starego drzewa i buduje nowe od podstaw. Zamiana `` na ``, czy `
` na ``, lub `