From accb6ea2f75fa2da8507a82dfe5dfb83663af49f Mon Sep 17 00:00:00 2001 From: Ramon Chancay Date: Thu, 14 Feb 2019 01:28:18 -0500 Subject: [PATCH 1/4] Reconciliation --- content/docs/reconciliation.md | 94 +++++++++++++++++----------------- 1 file changed, 48 insertions(+), 46 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index c2147a4dc..2ef93fb0a 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,35 @@ --- id: reconciliation -title: Reconciliation +title: Reconciliación permalink: docs/reconciliation.html --- +React proporciona una API declarativa para que no tengas que preocuparte por qué es exactamente lo que cambia en cada actualización. +Esto facilita mucho la escritura de aplicaciones, pero podría no ser obvio cómo se implementa esto dentro de React. Este artículo explica las elecciones que hicimos en el algoritmo "diferencial" de React para que las actualizaciones de los componentes sean predecibles y al mismo tiempo sean lo suficiente rápidas para las aplicaciones de alto rendimiento. -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. +## Motivacion {#motivation} -## Motivation {#motivation} +Cuando usas react, en un momento dado puedes pensar que la función `render()` crea un árbol de elementos de React. En la siguiente actualización de estado o propiedades, esa función `render()` devolverá un árbol diferente de elementos de React. React luego debe descubrir cómo actualizar de manera eficiente la interfaz de usuario para que coincida con el árbol más reciente. -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. +Existen algunas soluciones genéricas para este problema algorítmico de generar el número mínimo de operaciones para transformar un árbol en otro. Sin embargo, los [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) tienen una complejidad en el orden de O(n3) donde n es el número de elementos en el árbol. -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. +Si utilizamos esto en React, mostrar 1000 elementos requeriría del orden de mil millones de comparaciones. Esto seria demasiado costoso. En su lugar, React implementa un algoritmo heurístico O(n) basado en dos suposiciones. -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. Dos elementos de diferentes tipos producirán diferentes árboles. +2. El desarrollador puede insinuar qué elementos secundarios pueden ser estables en diferentes renders con una propiedad `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. +En la práctica, estos supuestos son válidos para casi todos los casos de uso práctico. -In practice, these assumptions are valid for almost all practical use cases. +## El algoritmo de diferencia {#the-diffing-algorithm} -## The Diffing Algorithm {#the-diffing-algorithm} +Al diferenciar dos árboles, React primero compara dos elementos raíz. El comportamiento es diferente dependiendo de los tipos de elementos raíz. -When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. +### Elementos de diferentes tipos {#elements-of-different-types} -### Elements Of Different Types {#elements-of-different-types} +Cada vez que los elementos raíz tienen diferentes tipos, React derribará el árbol viejo y construirá el nuevo árbol desde cero. Pasando de `` a ``, o de `
` a ``, o de `