diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 1624bfbde..b1224a6e2 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,35 @@ --- id: reconciliation -title: Reconciliation +title: Cогласование 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} -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. +При работе с React вы можете понимать `render()` как функцию, которая создаёт дерево React-элементов в какой-то момент времени. При последующем обновлении состояния или пропсов функция `render()` вернёт новое дерево React-элементов. Тепереь React должен понять, как эффективно обновить UI, чтобы он совпадал с новейшим из деревьев. -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. +Существует несколько общих решений алгоритмической проблемы трансформации одного дерева в другое за минимальное количество операций. Тем не менее, [передовые алгоритмы](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) имеют сложность порядка O(n3), где 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: +Если бы мы использовали это в React, отображение 1000 элементов потребовало бы порядка миллиарда сравнений. Это слишком дорого. Взамен, React реализует эвристический алгоритм O(n), который основывается на двух предположениях: -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. Два элемента с разными типами произведут разные деревья. +2. Разработчик может указать, какие дочерние элементы могут оставаться стабильными между разными рендерами с помощью пропа `key`. -In practice, these assumptions are valid for almost all practical use cases. +На практике эти предположения верны почти для всех случаев. -## The Diffing Algorithm {#the-diffing-algorithm} +## Алгоритм сравнения {#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. +При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов. -### Elements Of Different Types {#elements-of-different-types} +### Элементы различных типов {#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 `