Αυτό που εύχομαι ήξερα όταν άρχισα να δουλεύω με το React.js

Μετά την αρχική του κυκλοφορία στις 29 Μαΐου 2013, το React.js ανέλαβε το Διαδίκτυο. Δεν είναι μυστικό ότι εγώ και πολλοί άλλοι προγραμματιστές οφείλουμε την επιτυχία τους σε αυτό το εκπληκτικό πλαίσιο.

Με το Medium τόσο γεμάτο σεμινάρια React.js, εύχομαι ένας από αυτούς να μου είπε αυτές τις συμβουλές όταν ξεκίνησα.

Δεν χρειάζεται .bind (αυτό) όταν χρησιμοποιείτε τη λειτουργία βέλους

Συνήθως, θα έχετε κάτι τέτοιο όταν έχετε ένα ελεγχόμενο στοιχείο:

class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); }
 handleClick(event){ // your event handling logic }
 render(){ return (  Click Me  ); }}

Γράφετε .bind(this)σε κάθε μέθοδο που υπάρχει, επειδή τα περισσότερα σεμινάρια σας λένε να το κάνετε. Εάν έχετε πολλά ελεγχόμενα συστατικά, θα καταλήξετε με μια παχιά στοίβα κωδικών στο constructor(){}.

Αντ 'αυτού, μπορείτε:

class Foo extends React.Component{
 handleClick = (event) =>; { // your event handling logic }
 render(){ return (  Click Me  ); }}

Πως?

Η λειτουργία βέλους του ES6 χρησιμοποιεί το Lexical Scoping, το οποίο επιτρέπει στη μέθοδο να έχει πρόσβαση στο thisσημείο όπου ενεργοποιείται.

Όταν οι εργαζόμενοι σέρβις εργάζονται εναντίον σας

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

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

Μόνο για να βρείτε τον ιστότοπό σας δεν ενημερώνεται. ;

Μην πανικοβληθείτε, βεβαιωθείτε ότι έχετε src/index.js:

// Make sure it's set to unregisterserviceWorker.unregister();

Από την έκδοση 16.8, αυτή η γραμμή θα πρέπει να είναι serverWorker.unregister()από προεπιλογή.

Αλλά αν αποφασίσουν να αλλάξουν ξανά, θα ξέρετε πού να ψάξετε.

99% του χρόνου που δεν χρειάζεται να εξαγάγετε

Η εφαρμογή Δημιουργία React προσφέρει μια επιλογή στο yarn ejectέργο σας για να προσαρμόσετε τη διαδικασία κατασκευής σας.

Θυμάμαι ότι προσπάθησα να προσαρμόσω τη διαδικασία δημιουργίας ώστε οι εικόνες SVG να ενσωματώνονται αυτόματα στον κώδικα μας. Πέρασα ώρες προσπαθώντας να καταλάβω τη διαδικασία κατασκευής. Καταλήξαμε να έχουμε ένα αρχείο εισαγωγής που εισάγει ετικέτες SVG και αυξήσαμε την ταχύτητα φόρτωσης του ιστότοπου κατά 0,0001 χιλιοστά του δευτερολέπτου.

Η εξαγωγή του έργου React είναι σαν να σκάσεις την κουκούλα του αυτοκινήτου σου και να αλλάζεις τον κινητήρα εν κινήσει για να τρέχει 1% πιο γρήγορα.

Φυσικά, εάν είστε ήδη πλοίαρχος Webpack, αξίζει να προσαρμόσετε τη διαδικασία κατασκευής για να προσαρμόσετε τις ανάγκες του έργου.

Όταν προσπαθείτε να παραδώσετε εγκαίρως, εστιάστε την προσπάθειά σας στο σημείο που κινεί τη βελόνα προς τα εμπρός.

Το ESlint Auto Fix On Save εξοικονομεί τόσο πολύ χρόνο

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

Με το ESLint και το Visual Studio Code Plugin, μπορεί να το διορθώσει για αποθήκευση.

Πως?

  1. Στο package.jsonδικό σας , προσθέστε μερικές εξαρτήσεις dev και κάντε npm iή yarn:
"devDependencies": {
 "eslint-config-airbnb": "^17.1.0",
 "eslint-config-prettier": "^3.1.0",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-jsx-a11y": "^6.1.1",
 "eslint-plugin-prettier": "^3.0.0",
 "eslint-plugin-react": "^7.11.0"
}

2. Εγκαταστήστε την επέκταση ESLint

3. Ενεργοποιήστε την αυτόματη επιδιόρθωση κατά την αποθήκευση

Δεν χρειάζεστε Redux, στιλ-εξαρτήματα, κλπ…

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

Αν το μόνο που έχετε είναι ένα σφυρί, όλα μοιάζουν με ένα καρφί - Abraham Maslow

Πρέπει να σκεφτείτε τον χρόνο εγκατάστασης για ορισμένες από τις βιβλιοθήκες που χρησιμοποιείτε και να τη συγκρίνετε με:

  • Ποιο είναι το πρόβλημα που προσπαθώ να λύσω;
  • Αυτό το έργο θα διαρκέσει αρκετά για να επωφεληθεί από αυτήν τη βιβλιοθήκη;
  • Το React προσφέρει ήδη κάτι έξω από το κουτί;

Με το Context και τα Hooks διαθέσιμα για το React τώρα, χρειάζεστε ακόμα το Redux;

Συνιστώ ανεπιφύλακτα το Redux Offline για όταν οι χρήστες σας βρίσκονται σε κακό περιβάλλον σύνδεσης στο Διαδίκτυο.

Επαναχρησιμοποίηση χειριστή συμβάντων

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

class App extends Component {
 constructor(props) { super(props); this.state = { foo: "", bar: "", }; }
 // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.setState({ [name]: value });
 }; render() { return ( ); }}

Το setState είναι ασύγχρονο

Ο αφελής μου θα έγραφε κάτι σαν:

 constructor(props) { super(props); this.state = { isFiltered: false }; }
 toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered should be true, but it's not if (this.state.isFiltered) { // Do some filtering } };

Επιλογή 1: Μεταβίβαση της κατάστασης προς τα κάτω

toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState);};
filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering }};

Επιλογή 2: Η δευτερεύουσα συνάρτηση της επανάκλησης του setState

toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); });};
filterData = () => { if (this.state.isFiltered) { // Do some filtering }};

συμπέρασμα

Αυτές οι συμβουλές με έσωσαν πολύ χρόνο και είμαι βέβαιος ότι υπάρχουν περισσότερα. Μη διστάσετε να τα μοιραστείτε στην ενότητα σχολίων.

Εάν θέλετε να ενσωματώσετε τον ιστότοπό σας με το WeChat και να προσεγγίσετε 1+ δισεκατομμύριο χρήστες στην Κίνα, εγγραφείτε για ένα δωρεάν γλωσσάριο για τους όρους που χρησιμοποιούνται συνήθως στο WeChat.