You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
7
+
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.
8
8
9
-
## Motivation {#motivation}
9
+
## Motywacja {#motivation}
10
10
11
-
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.
11
+
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.
12
12
13
-
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(n<sup>3</sup>) where n is the number of elements in the tree.
13
+
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(n<sup>3</sup>), gdzie n jest liczbą elementów w drzewie.
14
14
15
-
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:
15
+
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:
16
16
17
-
1.Two elements of different types will produce different trees.
18
-
2.The developer can hint at which child elements may be stable across different renders with a `key` prop.
17
+
1.Dwa elementy różnych typów produkują różne drzewa.
18
+
2.Programista może wskazać, które elementy drzewa mogą być stabilne pomiędzy kolejnymi renderowaniami, używając właściwości `key`.
19
19
20
-
In practice, these assumptions are valid for almost all practical use cases.
20
+
W praktyce te założenia sprawdzają się w prawie wszystkich zastosowaniach.
21
21
22
-
## The Diffing Algorithm {#the-diffing-algorithm}
22
+
## Algorytm różnicujący {#the-diffing-algorithm}
23
23
24
-
When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.
24
+
Podczas różnicowania dwóch drzew React najpierw porównuje elementy nadrzędne. Dalsze kroki zależą od typów elementów nadrzędnych.
25
25
26
-
### Elements Of Different Types {#elements-of-different-types}
26
+
### Elementy różnych typów {#elements-of-different-types}
27
27
28
-
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `<a>`to`<img>`, or from `<Article>`to`<Comment>`, or from `<Button>`to`<div>` - any of those will lead to a full rebuild.
28
+
Zawsze, gdy elementy nadrzędne różnią się typem, React pozbywa się starego drzewa i buduje nowe od podstaw. Zamiana `<a>`na`<img>`, czy `<Article>`na`<Comment>` lub `<Button>`na`<div>` - każda z tych zmian spowoduje całkowite przebudowanie drzewa.
29
29
30
-
When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive`UNSAFE_componentWillMount()` and then`componentDidMount()`. Any state associated with the old tree is lost.
30
+
Gdy React pozbywa się starego drzewa, wszystkie przypisane do niego węzły DOM są niszczone. W instancjach komponentów wywoływane jest `componentWillUnmount()`. Podczas budowania nowego drzewa do DOM-u dodawane są nowe węzły. W instancjach komponentów wywoływane jest`UNSAFE_componentWillMount()`, a następnie`componentDidMount()`. Jakikolwiek stan przypisany do starego drzewa jest bezpowrotnie tracony.
31
31
32
-
Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
32
+
Jakiekolwiek komponenty poniżej elementu nadrzędnego również zostają odmontowane, a ich stan zniszczony. Na przykład, przy zmianie:
33
33
34
34
```xml
35
35
<div>
@@ -40,74 +40,73 @@ Any components below the root will also get unmounted and have their state destr
40
40
<Counter />
41
41
</span>
42
42
```
43
+
Stary `Counter` zostanie zniszczony i zamontowany zostanie nowy.
43
44
44
-
This will destroy the old `Counter` and remount a new one.
45
-
46
-
>Note:
45
+
>Uwaga:
47
46
>
48
-
>These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html)in new code:
47
+
>Te metody są przestarzałe i powinno się ich [unikać](/blog/2018/03/27/update-on-async-rendering.html)w nowym kodzie.
49
48
>
50
49
>-`UNSAFE_componentWillMount()`
51
50
52
-
### DOM Elements Of The Same Type {#dom-elements-of-the-same-type}
51
+
### Elementy DOM tego samego typu {#dom-elements-of-the-same-type}
53
52
54
-
When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. For example:
53
+
Przy porównywaniu dwóch elementów tego samego typu React patrzy na atrybuty obu elementów, zachowuje stary węzeł i aktualizuje jedynie atrybuty, które tego wymagają.
54
+
Na przykład:
55
55
56
56
```xml
57
57
<divclassName="before"title="stuff" />
58
58
59
59
<divclassName="after"title="stuff" />
60
60
```
61
61
62
-
By comparing these two elements, React knows to only modify the`className`on the underlying DOM node.
62
+
Porównując te dwa elementy, React wie, że należy zmienić jedynie`className`na istniejącym węźle DOM-u.
63
63
64
-
When updating `style`, React also knows to update only the properties that changed. For example:
64
+
Aktualizując `style`, React wie również, by aktualizować jedynie te właściwości, które uległy zmianie. Na przykład:
When converting between these two elements, React knows to only modify the `color` style, not the`fontWeight`.
72
+
Przy aktualizacji tych elementów React wie, by zmodyfikować jedynie `color`, a nie również`fontWeight`.
73
73
74
-
After handling the DOM node, React then recurses on the children.
74
+
Po obsłużeniu danego węzła DOM-u React rekursywnie wywołuje algorytm na kolejnych potomkach w drzewie.
75
75
76
-
### Component Elements Of The Same Type {#component-elements-of-the-same-type}
76
+
### Komponenty tego samego typu {#component-elements-of-the-same-type}
77
77
78
-
When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `UNSAFE_componentWillReceiveProps()`, `UNSAFE_componentWillUpdate()`and`componentDidUpdate()` on the underlying instance.
78
+
Gdy komponent jest aktualizowany, jego instancja pozostaje bez zmian, dzięki czemu stan jest zachowany pomiędzy kolejnymi renderowaniami. React aktualizuje właściwości instancji zgodnie z nowym elementem i wywołuje na niej `UNSAFE_componentWillReceiveProps()`, `UNSAFE_componentWillUpdate()`oraz`componentDidUpdate()`.
79
79
80
-
Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
80
+
Następnie wywołana zostaje metoda `render()`, a algorytm różnicujący sięga dalej w głąb drzewa.
81
81
82
-
>Note:
82
+
>Uwaga:
83
83
>
84
-
>These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html)in new code:
84
+
>Te metody są przestarzałe i powinno się ich [unikać](/blog/2018/03/27/update-on-async-rendering.html)w nowym kodzie.
85
85
>
86
86
>-`UNSAFE_componentWillUpdate()`
87
87
>-`UNSAFE_componentWillReceiveProps()`
88
88
89
-
### Recursing On Children {#recursing-on-children}
89
+
### Rekurencja po potomkach {#recursing-on-children}
90
90
91
-
By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference.
91
+
Podczas rekurencji przez potomstwo (ang. *children*) węzła DOM-u React iteruje po obu drzewach jednocześnie (starym i nowym), generując zmiany, gdy napotka na różnicę.
92
92
93
-
For example, when adding an element at the end of the children, converting between these two trees works well:
93
+
Na przykład, gdy dodamy element na koniec potomstwa, przejście pomiędzy tymi drzewami działa poprawnie:
94
94
95
95
```xml
96
96
<ul>
97
-
<li>first</li>
98
-
<li>second</li>
97
+
<li>pierwszy</li>
98
+
<li>drugi</li>
99
99
</ul>
100
100
101
101
<ul>
102
-
<li>first</li>
103
-
<li>second</li>
104
-
<li>third</li>
102
+
<li>pierwszy</li>
103
+
<li>drugi</li>
104
+
<li>trzeci</li>
105
105
</ul>
106
106
```
107
+
React dopasuje do siebie drzewa `<li>pierwszy</li>`, dopasuje drzewa `<li>drugi</li>`, następnie napotkawszy różnicę doda drzewo `<li>trzeci</li>`.
107
108
108
-
React will match the two `<li>first</li>` trees, match the two `<li>second</li>` trees, and then insert the `<li>third</li>` tree.
109
-
110
-
If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:
109
+
Przy naiwnej implementacji algorytmu dodanie elementu na początek będzie miało gorszą wydajność. Na przykład, przejście pomiędzy tymi dwoma drzewami jest mało wydajne:
111
110
112
111
```xml
113
112
<ul>
@@ -122,11 +121,12 @@ If you implement it naively, inserting an element at the beginning has worse per
122
121
</ul>
123
122
```
124
123
125
-
React will mutate every child instead of realizing it can keep the `<li>Duke</li>`and`<li>Villanova</li>`subtrees intact. This inefficiency can be a problem.
124
+
React dokona zmian przy każdym potomku, gdyż nie jest świadomy, że `<li>Duke</li>`oraz`<li>Villanova</li>`nie uległy zmianie, a jedynie przesunięciu. Może się to okazać problematyczne.
126
125
127
-
### Keys {#keys}
126
+
### Klucze {#keys}
128
127
129
-
In order to solve this issue, React supports a `key` attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a `key` to our inefficient example above can make the tree conversion efficient:
128
+
W celu rozwiązania powyższego problemu React wprowadził atrybut `key`. Gdy potomstwo posiada klucz (ang. *key*), React używa go przy porównaniu poprzedniego drzewa z nowym.
129
+
Na przykład, dodając `key` do poprzedniego przykładu pozbędziemy się problemu z wydajnością:
130
130
131
131
```xml
132
132
<ul>
@@ -140,31 +140,32 @@ In order to solve this issue, React supports a `key` attribute. When children ha
140
140
<likey="2016">Villanova</li>
141
141
</ul>
142
142
```
143
+
Teraz React wie, że element z kluczem `'2014'` jest nowy, a elementy o kluczach `'2015'` oraz `'2016'` jedynie zmieniły pozycję.
143
144
144
-
Now React knows that the element with key `'2014'` is the new one, and the elements with the keys `'2015'` and `'2016'` have just moved.
145
-
146
-
In practice, finding a key is usually not hard. The element you are going to display may already have a unique ID, so the key can just come from your data:
145
+
Dobranie stosownego klucza zazwyczaj nie przysparza trudności. Element, który wyświetlamy, może już posiadać unikalny ID, więc klucz może pochodzić bezpośrednio od twoich danych:
147
146
148
147
```js
149
148
<li key={item.id}>{item.name}</li>
150
149
```
151
150
152
-
When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.
151
+
W przeciwnym wypadku można dodać nowe ID do modelu danych bądź wykorzystać funkcję skrótu (ang. *hash function*) do wygenerowania klucza. Klucz musi być unikalny jedynie względem swego rodzeństwa.
153
152
154
-
As a last resort, you can pass an item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
153
+
W ostateczności jako klucza można użyć indeksu elementu w tablicy. Rozwiązanie to sprawdzi się, jeśli kolejność elementów w tablicy jest stała; w przypadku zmiennej kolejności różnicowanie będzie mniej wydajne.
155
154
156
-
Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like uncontrolled inputs can get mixed up and updated in unexpected ways.
155
+
W przypadku użycia indeksu jako klucza, zmiany w kolejności elementów tablicy mogą również powodować problemy ze stanem komponentów. Instancje komponentów są aktualizowane bądź nie na podstawie klucza. Jeśli klucz jest indeksem, każda zmiana pozycji elementu w tablicy powoduje zmianę klucza. W rezultacie stan komponentów może zostać zaktualizowany w nieprzewidywalny sposób i powodować trudne do zidentyfikowania błędy.
157
156
158
-
Here is [an example of the issues that can be caused by using indexes as keys](codepen://reconciliation/index-used-as-key) on CodePen, and here is [an updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues](codepen://reconciliation/no-index-used-as-key).
157
+
Na podanym CodePenie można zapoznać się z [przykładowym problemem, jaki stwarza stosowanie indeksów jako kluczy](codepen://reconciliation/index-used-as-key), a z kolei tutaj pokazany jest [sposób, w jaki unikanie indeksów w kluczu rozwiązuje problemy z wstawianiem, sortowaniem oraz zmianą pozycji elementów](codepen://reconciliation/no-index-used-as-key).
159
158
160
-
## Tradeoffs {#tradeoffs}
159
+
## Kompromisy {#tradeoffs}
161
160
162
-
It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. Just to be clear, rerender in this context means calling `render` for all components, it doesn't mean React will unmount and remount them. It will only apply the differences following the rules stated in the previous sections.
161
+
Należy pamiętać, że algorytm rekoncyliacji to szczegół implementacyjny. React mógłby ponownie renderować całą aplikację przy każdej akcji; rezultat byłby ten sam.
162
+
Dla jasności: przez ponowne renderowanie w tym kontekście rozumiemy wywołanie `render` dla wszystkich komponentów; nie oznacza to, że zostaną one odmontowane i zamontowane ponownie.
163
+
Oznacza jedynie zaaplikowanie zmian według reguł, które dotychczas przedstawiliśmy.
163
164
164
-
We are regularly refining the heuristics in order to make common use cases faster. In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
165
+
Regularnie usprawniamy algorytm heurystyczny, by zoptymalizować wydajność w najczęstszych przypadkach. W aktualnej implementacji możemy wyrazić fakt, iż poddrzewo zmieniło pozycję względem rodzeństwa, nie jesteśmy jednak w stanie wskazać, że zostało bez zmian przeniesione gdzie indziej. Algorytm wymusi ponowne renderowanie całego poddrzewa.
165
166
166
-
Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer.
167
+
Ponieważ React opiera się na heurystyce, tracimy na wydajności zawsze wtedy, gdy nie spełniamy jej założeń.
167
168
168
-
1.The algorithm will not try to match subtrees of different component types. If you see yourself alternating between two component types with very similar output, you may want to make it the same type. In practice, we haven't found this to be an issue.
169
+
1.Algorytm nie będzie dopasowywał poddrzew komponentów różnych typów. Jeśli naprzemiennie używasz komponentów różnego typu, a zwracających bardzo podobny wynik - sugerujemy ujednolicić typ. W praktyce nie przysporzyło nam to nigdy problemów.
169
170
170
-
2.Keys should be stable, predictable, and unique. Unstable keys (like those produced by`Math.random()`) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.
171
+
2.Klucze powinny być stabilne, przewidywalne i unikalne. Niestabilne klucze (na przykład generowane przez`Math.random()`) będą skutkować niepotrzebną przebudową wielu instancji komponentów i węzłów DOM-u, powodując spadek wydajności i utratę stanu w komponentach potomnych.
0 commit comments