Κοινή χρήση τεχνολογίας

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

Τα αγγλικά μου είναι περιορισμένα, οι δεξιότητές μου είναι μέτριες, και είμαι πολύ ενημερωμένος, καθώς δεν είμαι μεταφραστής, υπάρχουν πολλές τυχαίες μεταφράσεις, παρακαλώ διαβάστε το πρωτότυπο κείμενο

Αρχική διεύθυνση:https://facebook.github.io/react/docs/advanced-performance.html

---

###Βελτιστοποίηση απόδοσης

Κάθε φορά που οι προγραμματιστές επιλέγουν να χρησιμοποιήσουν το react σε ένα πραγματικό έργο, θα κάνουν πρώτα μια ερώτηση: Η χρήση του react κάνει το έργο πιο γρήγορο, πιο ευέλικτο και πιο εύκολο στη συντήρηση. Επιπλέον, η διαδικασία της εκ νέου απόδοσης της διεπαφής κάθε φορά που αλλάζουν τα δεδομένα κατάστασης θα προκαλεί συμφόρηση απόδοσης; Εσωτερικά, το React διασφαλίζει την απόδοση χρησιμοποιώντας ορισμένες λεπτές τεχνικές για την ελαχιστοποίηση των ακριβών λειτουργιών DOM που προκαλούν ενημερώσεις διεπαφής χρήστη κάθε φορά.

####Αποφύγετε την άμεση επίδραση στο DOM
Το React υλοποιεί ένα επίπεδο εικονικού DOM, το οποίο χρησιμοποιείται για τη χαρτογράφηση του εγγενούς δέντρου DOM του προγράμματος περιήγησης. Μέσω αυτού του επιπέδου εικονικού DOM, το React μπορεί να αποφύγει την απευθείας λειτουργία του DOM, επειδή η ταχύτητα του απευθείας χειρισμού του DOM του προγράμματος περιήγησης είναι πολύ χαμηλότερη από τη λειτουργία αντικειμένων JavaScript. Κάθε φορά που αλλάζουν οι ιδιότητες ή η κατάσταση ενός στοιχείου, το react θα κατασκευάσει ένα νέο εικονικό dom στη μνήμη και θα το συγκρίνει με το αρχικό παλιό για να προσδιορίσει εάν το δέντρο dom του προγράμματος περιήγησης πρέπει να ενημερωθεί, βελτιστοποιώντας έτσι την απόδοση του dom πιθανή απώλεια απόδοσης.

Επιπλέον, το react παρέχει λειτουργίες κύκλου ζωής εξαρτημάτων.shouldComponentUpdate, το στοιχείο θα καλέσει αυτήν τη συνάρτηση πριν αποφασίσει να κάνει εκ νέου απόδοση (αφού ολοκληρωθεί η εικονική σύγκριση DOM και δημιουργηθεί το τελικό DOM Αυτή η συνάρτηση δίνει στον προγραμματιστή την εξουσία να κάνει εκ νέου απόδοση και η συνάρτηση επιστρέφει απευθείας από προεπιλογή).true, υποδεικνύοντας ότι η ενημέρωση DOM θα ξεκινήσει απευθείας από προεπιλογή:

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

Αξίζει να σημειωθεί ότι το react θα καλεί αυτήν τη συνάρτηση πολύ συχνά, επομένως εάν σκοπεύετε να εφαρμόσετε τη λογική αυτής της συνάρτησης μόνοι σας, φροντίστε να διασφαλίσετε την απόδοση όσο το δυνατόν περισσότερο.

Για παράδειγμα, έχετε μια εφαρμογή συνομιλίας με πολλές αναρτήσεις, εάν μόνο μία από αυτές αλλάξει αυτήν τη στιγμή, εάν εφαρμόσετε τα ακόλουθαshouldComponentUpdate, το react θα αποφύγει την εκ νέου απόδοση αυτών των αναρτήσεων που δεν έχουν αλλάξει ανάλογα με την κατάσταση:

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

Εν ολίγοις, το React αποφεύγει όσο το δυνατόν περισσότερο τις ακριβές λειτουργίες DOM και επιτρέπει στους προγραμματιστές να παρεμβαίνουν σε αυτήν τη συμπεριφορά.

####shouldComponentUpdate σε δράση
Ακολουθεί ένα παράδειγμα στοιχείου που περιέχει θυγατρικά στοιχεία, όπως φαίνεται παρακάτω:

Προηγούμενος Επόμενο