Condivisione della tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Il mio inglese è limitato, le mie competenze sono mediocri e sono molto ben informato, poiché non sono un traduttore, ci sono molte traduzioni casuali. Se non puoi credermi, leggi il testo originale~~

Indirizzo originale:Italiano: https://facebook.github.io/react/docs/advanced-performance.html

---

###Ottimizzazione delle prestazioni

Ogni volta che gli sviluppatori scelgono di utilizzare React in un progetto reale, faranno prima una domanda: l'utilizzo di React renderà il progetto più veloce, più flessibile e più facile da mantenere. Inoltre, il processo di rendering dell'interfaccia ogni volta che i dati di stato cambiano causerà un collo di bottiglia nelle prestazioni? Internamente, React garantisce le prestazioni utilizzando alcune tecniche sottili per ridurre al minimo le costose operazioni DOM che causano ogni volta aggiornamenti dell'interfaccia utente.

####Evita effetti diretti sul DOM
React implementa un livello di DOM virtuale, che viene utilizzato per mappare l'albero DOM nativo del browser. Attraverso questo livello di DOM virtuale, React può evitare di utilizzare direttamente il DOM, perché la velocità di funzionamento diretto del DOM del browser è molto inferiore rispetto a quella di funzionamento di oggetti JavaScript. Ogni volta che le proprietà o lo stato di un componente cambiano, react costruirà un nuovo dom virtuale in memoria e lo confronterà con quello vecchio originale per determinare se l'albero del dom del browser necessita di essere aggiornato, ottimizzando così il rendering del dom tanto quanto possibile perdita di prestazioni.

Oltre a ciò, react fornisce funzioni relative al ciclo di vita dei componenti,shouldComponentUpdate, il componente chiamerà questa funzione prima di decidere di eseguire nuovamente il rendering (dopo che il confronto del DOM virtuale è stato completato e il DOM finale è stato generato). Questa funzione dà allo sviluppatore l'autorità di eseguire nuovamente il rendering e la funzione restituisce direttamente per impostazione predefinitatrue, indicando che l'aggiornamento del DOM verrà avviato direttamente per impostazione predefinita:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

Vale la pena notare che react chiamerà questa funzione molto frequentemente, quindi se prevedi di implementare tu stesso la logica di questa funzione, assicurati le prestazioni il più possibile.

Ad esempio, hai un'applicazione di chat con più post Se solo uno di essi cambia in questo momento, se implementi quanto segueshouldComponentUpdate, reagire eviterà di visualizzare nuovamente i post che non sono cambiati in base alla situazione:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

In breve, React evita il più possibile costose operazioni DOM e consente agli sviluppatori di interferire con questo comportamento.

####dovrebbeComponentUpdate in azione
Ecco un esempio di un componente contenente elementi figlio, come mostrato di seguito:

Precedente Prossimo