diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 439607dea..e5bd1f25f 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -4,32 +4,32 @@ title: Riconciliazione 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 espone una API dichiarativa così che tu non debba sapere con esattezza che cosa cambia per ogni update. Questo semplifica molto la scrittura delle applicazioni, ma potrebbe non essere ovvio come sia stata implementata. Questo articolo descrive le scelte che abbiamo fatto sugli algoritmi di confronto usati da React al fine di rendere gli update dei componenti prevedibili ed allo stesso tempo abbastanza veloci da offrire applicazioni a prestazioni elevate. -## Motivation {#motivation} +## Motivazione {#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 usi React, in un istante definito di tempo puoi pensare alla funzione `render()` come qualcosa che crea e ritorna un albero di elementi React. A seguito di un cambiamento di state o props, la stessa funzione `render()` ritornerà un albero di elementi React diverso dal precedente. React quindi avrà bisogno di capire come eseguire l'update della UI in maniera efficiente per farla combaciare con l'ultimo albero di elementi generato. -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. +Ci sono alcune soluzioni generiche per questo problema algoritmico al fine di generare il numero minimo di operazioni per la trasformazione di un albero in un altro. Tuttavia, lo [stato dell'arte di questi algoritmi](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) ha complessità nell'ordine di O(n3) dove n è il numero di elementi all'interno dell'albero. -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: +Se questi algoritmi venissero usati da React, la rappresentazione di 1000 elementi richiederebbe un numero di confronti nell'ordine di un miliardo. Sarebbe troppo dispendioso. React, invece, implementa un algoritmo euristico O(n) basato su due assunzioni: -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. Due elementi di tipo diverso produrranno alberi diversi. +2. Lo sviluppatore può suggerire all'algoritmo quali elementi potrebbero mantenersi stabili tra le diverse renderizzazioni attraverso l'uso di una prop `key`. -In practice, these assumptions are valid for almost all practical use cases. +In pratica, queste assunzioni sono valide quasi per tutti i casi d'uso. -## The Diffing Algorithm {#the-diffing-algorithm} +## L'Algoritmo di confronto {#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. +Nel paragonare due alberi, React confronta prima i due elementi alla radice. Il comportamento cambia a seconda del loro tipo. -### Elements Of Different Types {#elements-of-different-types} +### Elementi con tipi diversi {#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 `