10 συμβουλές πώς να φτιάξετε τον κώδικα ReactJS σαν PRO

Πολλοί από εμάς, προγραμματιστές frontend, js προγραμματιστές και επίσης αντιδρούν προγραμματιστές εργάζονται στις ομάδες που περιλαμβάνουν προγραμματιστές με διαφορετικό επίπεδο δεξιοτήτων. Η καλύτερη μέθοδος για να βελτιώσουμε τον κώδικα μας είναι η GOOD REVIEW ΚΩΔΙΚΟΣ ΠΟΙΟΤΗΤΑΣ - αλλά όχι ότι ελέγχουμε αν όλα σκέφτονται να δουλέψουν αλλά και πώς τα κολέγια μας έκαναν αυτό το αποτέλεσμα - οπότε πρέπει να διασφαλίσουμε καθαρό κώδικα.

Γιατί; Αυτό είναι απλό - αν η ομάδα σας αριθμεί μέχρι 5 άτομα, είναι εύκολο να ρωτήσετε πώς λειτουργεί. Αλλά αν η ομάδα σας είναι τεράστια ή υπάρχουν πολλές δυναμικές αλλαγές, αυτός ο κώδικας καλής ποιότητας μας βοηθά και άλλοι προγραμματιστές να το καταλάβουν και φυσικά μπορείτε να νιώσετε σαν PRO, P

Έχω λάβει 10 καλύτερες πρακτικές, οι οποίες βοηθούν εμένα και την ομάδα μου να βελτιώσουν την ποιότητα του κώδικα στα Σχέδια React. Αυτές οι συμβουλές βασίζονται γενικά στη λειτουργικότητα ES6, αλλά δεν τις χρησιμοποιούμε πάντα. Ψάξτε τους και αισθανθείτε ελεύθεροι να το χρησιμοποιήσετε πάρα πολύ !!

1. Στοιχεία κλάσης Συστατικά στοιχεία VS

Όλοι μας είμαστε πολύ χαρούμενοι, ότι στο ES6 εφαρμόστηκε υποστήριξη τάξης - μου αρέσει! Στην αντίδραση μπορούμε να κάνουμε ένα συστατικό με την επέκταση μιας απλής κλάσης που ονομάζεται 'React.Component'. Εκεί διαθέτουμε απλές μεθόδους διαχείρισης του κράτους, υποστήριξη συμβάντων κλπ. Μερικές φορές είναι πάρα πολύ που χρειαζόμαστε, αλλά γνωρίζουμε ότι μπορούμε να το χρησιμοποιήσουμε.

εισαγάγετε React, {Component} από το "react"
class MyComponent επεκτείνει το στοιχείο {
  render () {
    επιστροφή 

Γεια σας {this.props.text}   }} }}

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

εισαγωγή Αντιδρά από 'αντιδράσει'
const MyComponent = (υποστηρίξεις) => 

Γεια σας (props.text}

Αλλά η χρήση αυτών των δύο στοιχείων φαίνεται το ίδιο!

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

Εντάξει - έτσι ώστε να μπορούμε να χρησιμοποιήσουμε τα συστατικά κλάσης και πότε λειτουργικό στοιχείο; Οι κανόνες είναι πολύ εύκολοι - ΟΤΑΝ ΧΡΕΙΑΖΕΤΕ ΝΑ ΧΡΗΣΙΜΟΠΟΙΗΣΕΤΕ ΟΤΙ ΤΟ ΛΕΙΤΟΥΡΓΙΚΟ ΕΞΑΡΤΗΜΑ ΔΕΝ ΕΧΕΙ - ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ ΤΑ ΚΑΤΗΓΟΡΙΑ ΤΟΥ ΚΛΑΣΟΥ!

Αρκετά εύκολα? Ναι! Αρχίστε να γράφετε στοιχεία από το σκίτσο σαν λειτουργικό στοιχείο. Όταν βλέπετε ότι πρέπει να χρησιμοποιήσετε κάτι σαν καταστάσεις ή να ανιχνεύσετε κάποιες αλλαγές στο συστατικό σας - όπως το componentWillMount () κλπ. Τότε θα μπορούσατε να το μετατρέψετε σε κλάση Component.

Όταν σκέφτεστε για αυτό το είδος του εξαρτήματος που χρησιμοποιείτε, θα γίνετε σαν PRO!

2. "Εάν" δηλώσεις στο πρότυπο συστατικό

Κοιτάξτε κάτω ... Ξέρετε τι συμβαίνει με αυτή τη μέθοδο if statement;

{a> b; : null}

Αν η συνθήκη είναι ασυνεπής, το React θα καταστεί μηδενικό. Χμμ ... είναι εντάξει - δεν το βλέπω έτσι δεν υπάρχει πρόβλημα ... ΟΧΙ !!!

Αυτό το null εξακολουθεί να υπάρχει στο DOM σας, οπότε αν θέλετε να πάρετε όλα τα παιδιά από εσάς ή να καλέσετε nth-παιδιά τότε αυτό το null θα μετρηθεί!

Λύση?

{a> b && }

Τόσο εύκολο, τόσο κομψό. Όπως ένα PRO!

3. Σύνδεση λειτουργίας

I LOVE ES6! ΑΓΑΠΟΥΜΕ ΛΕΙΤΟΥΡΓΙΕΣ ΒΕΛΟΥΣ !!! Αλλά αν καταλάβετε πώς λειτουργούν πραγματικά, τότε η χρήση τους σε αντιδράσεις είναι πολύ εύκολη. Περισσότερα για αυτά (Εδώ). Σε μια λειτουργία με πολύ σύντομο βέλος πάρτε ένα πεδίο από τον άμεσο γονέα τους, που δηλώνεται.

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

class MyComponent επεκτείνει το στοιχείο {
  κατασκευαστής (στηρίγματα) {
    σούπερ (στηρίγματα)
    this.clickHander = this.clickHander.bind (αυτό)
  }}
  clickHander (e) {
    e.preventDefault ();
    alert ('Hello' + this.props.text)
  }}
  render () {
    επιστρέψτε  
  }}
}}

Δηλώνουμε τη λειτουργία clickHandler, αλλά το κύριο πλαίσιο αυτών (αυτό) είναι το κουμπί στο οποίο κάνουμε κλικ. Επομένως, αν θέλουμε να δεσμευτούμε αυτό ως τάξη μας, τότε πρέπει να το δεσμευτούμε στον κατασκευαστή.

Μπορώ να διευκολύνω; ΦΥΣΙΚΑ!!! Με τη λειτουργία βέλους, επειδή έχει μια εμβέλεια από τον άμεσο γονέα τους, ότι δηλώνεται (αντίγραφο από πάνω).

class MyComponent επεκτείνει το στοιχείο {
  clickHander = (e) => {
    alert ('Hello' + this.props.text)
  }}
 render () {
    επιστρέψτε  
  }}
}}

Ευκολότερη, ταχύτερη και μοιάζει με PRO !!!

** ΣΠΟΥΔΑΙΟΣ **

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

4. Βραχύτερα στηρίγματα και καταστάσεις

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

...
var width = this.props.myObject.width,
    height = this.props.myObject.height,
    χρώμα = this.props.myObject.color;
...

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

...
var {πλάτος, ύψος, χρώμα} = this.props.myObject;
...

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

Πώς μπορούμε να το χρησιμοποιήσουμε για να αντιδράσουμε;

εισαγάγετε React, {Component} από το "react"
class MyComponent επεκτείνει το στοιχείο {
  render () {
    let {όνομα, ηλικία} = this.props
    επιστροφή 

Το όνομά μου είναι {name}. Είμαι {ηλικίας} ετών.   }} }}

ή με συνιστώσα λειτουργίας

εισαγωγή Αντιδρά από 'αντιδράσει'
const MyComponent = ({όνομα, ηλικία}) => 

Το όνομά μου είναι {name}. Είμαι {ηλικίας} ετών.

Ενα άλλο παράδειγμα? Όταν χρησιμοποιείτε μεγάλη δομή υποθηκών ή καταστάσεων.

εισαγάγετε React, {Component} από το "react"
class MyComponent επεκτείνει το στοιχείο {
  state =
    ομάδα: [
      {
        άτομο: {
          βασικές πληροφορίες: {
            όνομα: «Michal»,
            ηλικία: 27
          }}
        }}
      }}
    ]
  }}
  render () {
    ας {όνομα, ηλικία} = this.props.team [0] .person.basicInfo
    
    επιστροφή 

Το όνομά μου είναι {name}. Είμαι {ηλικίας} ετών.   }} }}

Ανετα? Ανετα! Και μοιάζει με PRO;)

5. Διαχωρισμός στυλ

Πολύ γρήγορες συμβουλές - ΔΙΑΧΩΡΙΣΤΕ ΣΤΥΛ !!! :ΡΕ

Αλλά έχουμε δύο περιπτώσεις:

  1. Μπορούμε να χρησιμοποιήσουμε εξωτερικά στυλ από αρχεία (.css, .scss)
  2. Χρησιμοποιούμε ορισμένα εξαρτήματα που χρησιμοποιούν τους στυλ κτίριάς τους, αλλά χρησιμοποιούν μόνο inline όπως υλικό-ui

Η πρώτη κατάσταση είναι πολύ εύκολη, βάζουμε στο webpack sass και φορτωτή στυλ, και αυτό είναι όλο!

Αλλά η δεύτερη κατάσταση είναι λίγο δύσκολη και θέλω να σας παρουσιάσω λίγες λύσεις:

# 1. Const με στυλ

εισαγάγετε React, {Component} από το "react"
const styles = {
  παράγραφος: {
    'fontSize': '10px',
    'χρώμα': '# ff0000'
  }}
}}
class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Αυτό είναι το πρώτο μου κείμενο         

Αυτό είναι το δεύτερο μου κείμενο            )   }} }}

# 2. CSS Modules

Είναι ωραία η φόρτωση του αντικειμένου και της αναφοράς CSS στον κώδικά σας στην κλάση που υπάρχει στο αρχείο css.

εισαγάγετε React, {Component} από το "react"
εισαγωγικές κατηγορίες από './style.css'
class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Αυτό είναι το πρώτο μου κείμενο         

Αυτό είναι το δεύτερο μου κείμενο            )   }} }}

Γρήγορο βίντεο πώς να σας προετοιμάσει webpack για CSS

Και θυμηθείτε - εάν μπορείτε να διαχωρίσετε τα αρχεία σας και να κάνετε εύκολη την επεξεργασία, τότε δουλεύετε σαν PRO!

6. Εξαρτήσεις περιβάλλοντος

Μας αρέσει να πρωτότυπο κάτι, αλλά δεν θέλαμε να βάλουμε κάτι για την έκδοση παραγωγής. Πώς να αποκρύψετε τα θραύσματά σας ή να διαθέσετε κάτι μόνο για προγραμματιστές ή για ανάπτυξη;

Χρησιμοποιήστε ΜΕΤΑΒΛΗΤΕΣ ΠΕΡΙΒΑΛΛΟΝΤΟΣ - επιπλέον μεταβλητή που μπορείτε να εκχωρήσετε κατά την εκκίνηση ή την οικοδόμηση του έργου σας. Όταν ξεκινάτε οποιαδήποτε ενέργεια από το τερματικό, τότε μπορείτε να βάλετε επιπλέον μεταβλητές που ωθούνται σε εφαρμογή από κόμβο στη διαδικασία. Τότε μπορείτε να πιέσετε οτιδήποτε.

πρώην. MY_VARIABLE = "Hello World!" npm έναρξη εκκίνησης

Στη συνέχεια, στο process.env.MY_VARIABLE θα πρέπει να δούμε την αξία μας.

Αν χρησιμοποιείτε το create-react-app τότε έχετε χτίσει μεταβλητή όπως NODE_ENV που επιστρέφει τη λειτουργία της κατασκευής σας όπως ανάπτυξη, παραγωγή ή δοκιμή. Και όλα αυτά για βασική χρήση.

const είναιDebug = process.env.NODE_ENV === 'ανάπτυξη'

Πώς να το χρησιμοποιήσετε στην πράξη;

εισαγάγετε React, {Component} από το "react"
const είναιDebug = process.env.NODE_ENV === 'ανάπτυξη'
class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Αυτό είναι το δημόσιο κείμενο μου         {isDebug &&

Αυτό είναι το κείμενό μου ανάπτυξης }            )   }} }}

Δεν είμαι σίγουρος ότι είναι σαν ένα PRO, αλλά μπορείτε να περάσετε από το ENV VARIABLE κάποιες περιβαλλοντικά ευαίσθητες πληροφορίες όπως διεύθυνση URL API root ή διεύθυνση έργου κλπ.

** Σπουδαίος **

Μη ξεχνάτε ότι αν κάποιος θέλει να σας αποκωδικοποιήσει τον πηγαίο κώδικα, τότε μπορεί να σας δει εξαρτήσεις.

7. Να θυμάστε σχετικά με τις δυνατότητες δοκιμής εξαρτημάτων

Αυτό είναι αρκετά εύκολο να καταλάβετε - αν σκέφτεστε να δοκιμάσετε να αντιδράσετε την εφαρμογή, τότε πιθανώς θέλετε να χρησιμοποιήσετε το Jest για δοκιμή. Αλλά πρέπει να θυμάστε ότι αν συνδέσετε τα στοιχεία σας με κάποια backend όπως Apollo (για GraphQL) ή κρατικό μηχάνημα όπως Redux ή άλλο HOC τότε πρέπει να θυμηθείτε ότι αυτές οι επεκτάσεις δεν θα είναι διαθέσιμες σε απλή δοκιμή εξαρτημάτων. Και αυτό είναι φυσιολογικό. Όταν θέλετε να δοκιμάσετε το στοιχείο SINGLE, τότε δοκιμάζετε μόνο εκεί λειτουργικότητα - ελέγχοντας εάν τα στηρίγματα εισόδου και οι ενέργειες σχετικά με το στοιχείο λειτουργούν σωστά.

Τόσο πώς να προετοιμάσετε τα εξαρτήματά σας για έλεγχο;

Αν δεν έχετε κανένα HOC, κανονικά πραγματοποιήστε εξαγωγή:

εισαγάγετε React, {Component} από το "react"
class MyComponent επεκτείνει το στοιχείο {
  render () {
    let {όνομα, ηλικία} = this.props
    επιστροφή 

Το όνομά μου είναι {name}. Είμαι {ηλικίας} ετών.   }} }}

προεπιλογή εξαγωγής MyComponent

αλλά αν θέλετε να χρησιμοποιήσετε οποιοδήποτε HOC χρησιμοποιήστε αυτό το μοτίβο:

εισαγάγετε React, {Component} από το "react"
η κλάση εξαγωγής MyComponent επεκτείνει το στοιχείο {
  render () {
    let {όνομα, ηλικία} = this.props
    επιστροφή 

Το όνομά μου είναι {name}. Είμαι {ηλικίας} ετών.   }} }}

εξ ορισμού εξαγωγή myHocFunction (MyComponent)

Γιατί; Επειδή όταν θέλετε να εισάγετε σε άλλο έγγραφο το στοιχείο σας με HOC τότε χρησιμοποιείτε:

Εισαγωγή του MyComponent από './components/MyComponent'

αλλά σε δοκιμές που μπορείτε να χρησιμοποιήσετε

εισαγωγή {MyComponent} από το αρχείο "./components/MyComponent"

Απλός κώδικας, απλή λύση αλλά πολλές δυνατότητες χρήσης - γιατί φυσικά είμαστε PROs)

8. Χρησιμοποιήστε τους βοηθούς

Πολύ, πολύ απλό και σημαντικό πράγμα. Μερικές φορές χρησιμοποιείτε τις ίδιες λειτουργίες ή έχετε τους ίδιους κανόνες σε πολλά στοιχεία. Δεν είναι απαραίτητο να αντιγράψετε τον κωδικό σας. Απλά διαχωρίστε τις λειτουργίες βοήθειας σε άλλα αρχεία και βάλτε το σε παγκόσμιο κατάλογο βοηθών:

δημόσιο
src
  βοηθούς
    globals.js
  ενότητες
    Χρήστες
      βοηθούς
        index.js
      UserList.js
      User.js
  app.js

** Σπουδαίος **
Εάν αντιγράψετε τον κώδικα σας - θα πρέπει να το βελτιώσετε!

Ο διαχωρισμός αρχείων είναι ο καλύτερος τρόπος να γίνετε σαν PRO!

9. Αντιδράστε τα θραύσματα

Έχετε προετοιμάσει την καλύτερη εμφάνισή σας, η HTML σήμανση είναι η καλύτερη, όλα σκέφτονται αρκετά ... ARHHHH AMAZING, απλά να αντιδράσει στην εφαρμογή ... header ... looks perfect ... jumbotron ... awesome ... wait ... Έχω ένα τμήμα που δεν είναι τυλιγμένο ... OH NO ... αντιδρά ... SHIT!

Αυτό ήταν ένα πρόβλημα όταν θέλετε να δημιουργήσετε ένα στοιχείο που δεν είχε περιτύλιγμα. Για πολύ καιρό πρέπει να τυλίγουμε τα πάντα:

class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Αυτό είναι το πρώτο μου κείμενο         

Αυτό είναι το δεύτερο μου κείμενο            )   }} }}

γιατί η αντίδραση δεν μας επέτρεψε να την βάλουμε μόνη της. γιατί - δεν χρησιμοποιήθηκε αν κάθε στοιχείο μέσα έχει το δικό του uniq κλειδί, ώστε να μπορεί να αναγνωρίσει ποιο τμήμα του DOM είναι το συστατικό του.

Αλλά το React έχει προσθέσει μια νέα λειτουργία που ονομάζεται "React Fragments", που σας επιτρέπουν να δημιουργήσετε συστατικά που ομαδοποιούν πολλά στοιχεία χωρίς περιτύλιξη στο DOM. Λειτουργεί το ίδιο όπως το wrap div, αλλά αντ 'αυτού div χρησιμοποιούμε την εντολή ή σύντομη έκδοση <>

Πρώην.

class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      
        

Αυτό είναι το πρώτο μου κείμενο         

Αυτό είναι το δεύτερο μου κείμενο            )   }} }}

ή

class MyComponent επεκτείνει το στοιχείο {
  render () {
    ΕΠΙΣΤΡΟΦΗ (
      <>
        

Αυτό είναι το πρώτο μου κείμενο         

Αυτό είναι το δεύτερο μου κείμενο            )   }} }}

Καταπληκτικό - είσαι σαν PRO διαβάζουμε το πλήρες άρθρο από την τεκμηρίωση

10. Οι PROs χρησιμοποιούν τους τύπους prop και τα προεπιλεγμένα στηρίγματα

Αν είστε PRO, σκεφτείτε τα πράγματα που χρειάζεστε. Γιατί πρέπει να χρησιμοποιώ PropTypes;

Κατά τη διάρκεια της ανάπτυξης μπορείτε να είστε βέβαιοι ότι τα υπόλοιπα εξαρτήματα σας μεταφέρουν σωστά την αξία τους. Αν θέλετε να χρησιμοποιήσετε συμβολοσειρά, τότε στη σφήνα σας θα πρέπει να είναι μια συμβολοσειρά, επειδή ex. μπορείτε να κάνετε εσωτερικά συστατικά στοιχεία για συμβολοσειρά. Εάν προσθέσετε defaultProps εάν το propType σας δεν απαιτείται, σας προστατεύει ότι εσείς ή το κολέγιο του έργου σας ξεχνάτε να προσθέσετε κάποια πρόταση στο στοιχείο.

εισαγάγετε React, {Component} από το "react"
εισαγωγή προτύπων από «προ-τύπους»
class MyComponent επεκτείνει το στοιχείο {
  render () {
    επιστροφή 

Γεια σας, {this.props.text.toLocaleUpperCase ()}   }} }}

MyComponent.propTypes = {
  κείμενο: PropTypes.string
}}
MyComponent.defaultProps = {
  κείμενο: 'Παγκόσμια'
}}

Και εσείς θέλετε να μάθετε περισσότερα για τα PropTypes - Πλήρη τεκμηρίωση

ΠΕΡΙΛΗΨΗ

Όπως βλέπετε, οι 10 συμβουλές είναι πολύ εύκολο να εφαρμοστούν στον κώδικα σας. Διαβάστε ακόμα μια φορά, προσθέστε αντίδραση αν σας αρέσει και γράψτε στα σχόλια αν υπάρχει κάτι ασαφές ή αν θέλετε να διαβάσετε κάτι πιο συγκεκριμένο! Καλή τύχη!