From 811bfe7c13c5bee46d9cd9338755eaf91a666b20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Barbosa?= Date: Sat, 9 Feb 2019 13:20:48 -0300 Subject: [PATCH 1/3] Translate reconciliation --- content/docs/reconciliation.md | 97 +++++++++++++++++----------------- 1 file changed, 48 insertions(+), 49 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index c2147a4dc..240201aa9 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,36 +1,38 @@ --- id: reconciliation -title: Reconciliation +title: Reconciliação 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. +O React provê uma API declarativa, assim, você não precisa se preocupar em saber exatamente o que mudou aem cada atualização. Isso torna mais fácil a criação de aplicações, apesar de não ser obvia a forma como isso é implementado no React. Este artigo explica as escolhas que fizemos no algoritimo de "diffing" para que as atualizaçãos nos componentes sejam previsíveis e rapidas o suficiente para aplicações de alta performance. -## Motivation {#motivation} +## Motivação {#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. +Quando utilizamos React, podemos imaginar a função `render()` como uma função responsável por gerar à árvore de Elementos React. -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](http://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. +Na proxima atualização de `state` ou `props`, a função `render()` retornará uma árvore de Elementos React diferente. Dessa forma, o React precisará descobrir como ele pode atualizar a UI para sincronizar com a arvore mais recente. -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: +Existem algumas soluções genéricas para o problema deste algoritmo de gerar menor número de operações para transformar uma árvore em outra. Contudo, o [algoritmo de última geração](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) possui uma complexidade da ordem de O(n3), onde n é o numero de elementos na àrvore. -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. +Se usassemos isso no React, exibir 1000 elementos iria requerer aproximadamente um bilhão de comparações. Isso é, de longe, muito custoso. Em vez disso, o React implementa um algoritmo eurístico da ordem de O(n) baseado em duas suposições: -In practice, these assumptions are valid for almost all practical use cases. +1. Dois elementos de tipos diferentes irão produzir árvores diferentes. +2. O desenvolvedor pode indicar quais elementos filhos estão estáveis entre diferentes renderizações através da propriedade `key` -## The Diffing Algorithm {#the-diffing-algorithm} +Na prática, essas suposições são válidas para quase todos os casos práticos. -When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. +## O Algoritimo de Diferenciação {#the-diffing-algorithm} -### Elements Of Different Types {#elements-of-different-types} +Quando diferenciando duas árvores, o React primeiro compara os dois elementos raíz. O comportamento é diferente dependendo do tipo dos elementos raíz. -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 `