diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index ab8886b8d..7ad9e556e 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,34 @@ --- id: reconciliation -title: Reconciliation +title: Узгодження 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. +React надає декларативний API, щоб вам не довелося турбуватися про те, що саме змінюватиметься під час кожного оновлення. Це робить процес створення додатків значно простішим, але спосіб, за допомогою якого все це реалізовано в React, може бути не очевидним. У цій статті пояснюється вибір, зроблений для алгоритмів порівняння в React, завдяки чому оновлення компонентів є передбачуваним, причому відбувається достатньо швидко в високопродуктивних додатках. +## Мотивація {#motivation} -## Motivation {#motivation} +Коли ви використовуєте React, в певний момент часу можна подумати про функцію `render()` як про функцію для створення дерева елементів React. При наступному оновленні стану або пропсів функція `render()` поверне нове дерево елементів React. При цьому React повинен розуміти, як ефективно оновити інтерфейс користувача, щоб він повністю відповідав самому новому дереву. -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. +Існує декілька загальних способів вирішення алгоритмічної задачі генерації мінімальної кількості операцій для перетворення одного дерева елементів в інше. Однак складність сучасних алгоритмів ([state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf)) складає приблизно O(n3), де n — кількість елементів в дереві. -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. +Якщо спробувати використати це в React, то для відображення 1000 елементів необхідно було б виконати близько одного мільярда порівнянь. Це приведе до великих затрат пам'яті. Замість цього React використовує евристичний алгоритм O(n), використання якого основане на двох припущеннях: -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. Два елементи різних типів створюватимуть різні дерева. +2. Розробник має змогу вказувати, які елементи можуть не змінюватись між різними рендерами за допомогою пропа `key`. -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. +На практиці ці припущення є правильними практично для всіх випадків використання. -In practice, these assumptions are valid for almost all practical use cases. +## Алгоритм порівняння {#the-diffing-algorithm} -## The Diffing Algorithm {#the-diffing-algorithm} +При порівнянні двох дерев React в першу чергу порівнює їх кореневі елементи. Подальші дії залежать від того, який тип мають кореневі елементи. -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 {#elements-of-different-types} +Кожний раз, коли тип кореневих елементів різний, React демонтує старе дерево і створює нове з самого початку. Перехід від `` до ``, від `
` до `` або від `