7 συμβουλές και κόλπα στο React

Χρήση TypeScript

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

import PropTypes from 'prop-types'

function UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
firstname: PropTypes.string.isRequired,
επώνυμο: PropTypes.string.isRequired
...
})
}

function UserList({ users }) {
return

{users.map((user) => )}

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
firstname: PropTypes.string.isRequired,
επώνυμο: PropTypes.string.isRequired
...
}))
}

διεπαφή χρήστη {
firstname: String!
επώνυμο: String!
...
}

function UserCard({ user }: { user: User }) {
return

{user.firstname}, {user.lastname}

}

function UserList({ users }: { users: User[] }) {
return

{users.map((user) => )}

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

Εκτός από αυτό, πολλές γνωστές βιβλιοθήκες javascript μεταναστεύουν στην Typescript. π.χ: AdonisJS

Ξεχωριστά στοιχεία Παρουσίασης & Εμπορευματοκιβωτίων

Ο διαχωρισμός των συστατικών Παρουσίασης και Περιέκτησης καθιστά τον κώδικά μας ευκολότερο να ελεγχθεί και να αιτιολογηθεί.

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

Στοιχεία εμπορευματοκιβωτίων ασχολούνται με πώς λειτουργούν τα πράγματα. Παρέχουν το δεδομένα και συμπεριφορά σε στοιχεία παρουσίασης ή άλλα στοιχεία δοχείου.

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

Ελέγξτε το ακόλουθο παράδειγμα με το User Component το οποίο χρησιμοποιείται με διαφορετικά δοχεία που παρέχουν διαφορετικά δεδομένα και συμπεριφορά.

function BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

Χρήση React Hooks και λειτουργικά συστατικά Τα λειτουργικά συστατικά "που αναφέρονταν ως Stateless Components πριν" δεν είναι πλέον stateless.Χάρη στα React Hooks, τώρα μπορείτε να χρησιμοποιήσετε το άγκιστρο useState για να αποθηκεύσετε την κατάσταση σε ένα λειτουργικό συστατικό. ή ακόμα και να χρησιμοποιήσετε τον κύκλο ζωής του συστατικού χρησιμοποιώντας το useEffect. Τα λειτουργικά συστατικά είναι εύκολο να διαβαστούν και να δοκιμαστούν. Ο πυρήνας React Core έχει μερικά άλλα χρήσιμα άγκιστρα που μπορείτε να εξερευνήσετε στην Αναφορά άγκιστρων. Το εκπληκτικό είναι ότι μπορείτε επίσης να ορίσετε τα προσαρμοσμένα σας hooks. Στο ακόλουθο παράδειγμα, δημιουργήσαμε ένα προσαρμοσμένο άγκιστρο react που ονομάζεται useDebounce. Το οποίο χρησιμοποιείται για τον περιορισμό των κλήσεων API της αυτόματης συμπλήρωσης όταν αλλάζει το κείμενο εισόδου.

import { useEffect } from 'react',
import { debounce } from 'lodash',
export default function useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] ),
return debounced,
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => {
      // Fetch API (προαιρετικό)
}, 1000) // 1 sec

return (

{...}
)
}

Εκτός αυτού, τα άγκιστρα React είναι μια εξαιρετική αντικατάσταση για τα εξαρτήματα ανώτερης τάξης (HoCs). Styled Component Το Styled Component είναι μια βιβλιοθήκη που επιτρέπει την εισαγωγή της Dynamic CSS σε επίπεδο συστατικού. αξιοποιώντας παράλληλα το πλεονέκτημα του ES. Κάνει τα συστατικά σας πιο προβλέψιμα και επαναχρησιμοποιήσιμα. Ξεχάστε ότι σπαταλάτε πολύ χρόνο ψάχνοντας το σωστό όνομα κλάσης για ένα στοιχείο, ενώ προσπαθείτε να αποφύγετε τη χρήση ενός υπάρχοντος. Με τα Styled Components διασφαλίζετε ότι τα στυλ σας είναι οριοθετημένα στο στοιχείο και τα αυτόματα παραγόμενα ονόματα κλάσεων στο βήμα της δημιουργίας. Εκτός από αυτό, δεν ήταν ποτέ ευκολότερο να δημιουργήσετε δυναμικά CSS. τα στυλ σας θα δημιουργούνται σύμφωνα με τα στηρίγματα που περνούν στο στοιχείο. Στο ακόλουθο παράδειγμα, το στυλ div εξαρτάται τόσο από το περιγραφόμενο prop όσο και από το παγκόσμιο θέμα.

const Wrapper = styled.div`

  border: ${props => props.outlined ? '1px solid' : 'none'},

    background: ${props => props.theme.light ? 'black' : 'white'}

Το τελευταίο σημείο σχετικά με τα στυλιζαρισμένα συστατικά είναι ότι βελτιώνει την απόδοση, καθώς δεν φορτώνει περιττά στυλ αχρησιμοποίητων συστατικών. Βιβλιοθήκη συμπλήρωσης υποδοχών Έστω ότι έχετε ορίσει μια διάταξη για την εφαρμογή react σας. τότε θέλετε να προσθέσετε ένα widget στην πλαϊνή μπάρα μόνο για μια συγκεκριμένη σελίδα. Αν δεν είχατε λάβει υπόψη σας αυτή την περίπτωση από την αρχή Μπορεί να απαιτήσει μια τεράστια αλλαγή στη διάταξη. Αλλά χρησιμοποιώντας μια βιβλιοθήκη όπως η ‣ Μπορείτε απλά να ορίσετε μια υποδοχή στην πλαϊνή μπάρα. Στη συνέχεια, γεμίστε αυτή την υποδοχή με widgets μόνο για συγκεκριμένες σελίδες. με αυτόν τον τρόπο θα αποφύγετε το πέρασμα σημαιών σε όλο το δέντρο των στοιχείων για να αποκτήσετε πρόσβαση στο Sidebar. Έχει παρόμοια συμπεριφορά με το React Portals το οποίο είναι επίσης μια εξαιρετική λύση για περιπτώσεις όπως Modals, Tooltips...

import { Slot, Fill, Provider } from 'react-slot-fill',
const Sidebar = (props) =>
 
export default Toolbar,
Sidebar.Item = (props) =>

{ props.label }
const Widget = () =>
[

];
const Page = ({παιδιά}) =>

{children}

const HomePage = () =>

μια σελίδα χωρίς Widjet
const DashboardPage = () =>

μια σελίδα με Widjet

Εξαρτήματα ανώτερης τάξης Ακόμα και αν τα άγκιστρα React αντικαθιστούν τα HOC στις περισσότερες περιπτώσεις. Τα HoCs εξακολουθούν να είναι μια εξαιρετική επιλογή όσον αφορά την απόκρυψη της πολυπλοκότητας από συστατικά όπως η παροχή πολλαπλών στηριγμάτων σε συστατικά Σελίδας ή η απόδοση υπό όρους (Ιδιωτικές διαδρομές, κατάσταση φόρτωσης ...) Το ακόλουθο παράδειγμα δείχνει πώς μπορούμε να ενθυλακώσουμε την πολυπλοκότητα τόσο των Ιδιωτικών διαδρομών όσο και των κοινών στηριγμάτων Σελίδας σε επαναχρησιμοποιήσιμα HoCs που εφαρμόζονται σε όλες τις σελίδες της εφαρμογής. Λάβετε υπόψη ότι οι περισσότερες περιπτώσεις HoCs μπορούν να αντικατασταθούν από React Hooks. και ότι μπορούμε κατά λάθος να παρακάμψουμε τα props από σύνθετα HoCs. Έτσι, παρακαλούμε να χρησιμοποιείτε HoCs μόνο όταν είναι απαραίτητο για να διατηρήσετε τα στοιχεία της σελίδας καθαρότερα. διαφορετικά χρησιμοποιήστε React Hooks.

function withPrivateRoute(Component) {
...
return function PrivateRoute(props) {
if (!userConnected) return ,
return ,
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ,
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
Σελίδα προφίλ
}
export default withPrivateRoute(withPageProps(ProfilePage))

Όρια σφαλμάτων Τα όρια σφαλμάτων είναι στοιχεία κλάσεων, τα οποία συλλαμβάνουν όλα τα σφάλματα/εξαιρέσεις που δημιουργούνται σε επίπεδο παιδιών. Όταν δηλώνονται σε κορυφαίο επίπεδο, θα σας επιτρέψουν να κάνετε σωστό χειρισμό σφαλμάτων, εμφανίζοντας ένα μήνυμα σφάλματος και καταγράφοντας το σφάλμα σε ένα εργαλείο παρακολούθησης πλατφόρμας όπως το Sentry. Με αυτόν τον τρόπο θα είστε οι πρώτοι πώς να πιάσετε τα σφάλματα και να προσπαθήσετε να τα διορθώσετε πριν επηρεάσουν την εμπειρία του χρήστη. Σημείωση: Τα ErrorBoundaries πρέπει να δηλώνονται σε κλάση δεν υποστηρίζουν λειτουργικά στοιχεία.

class ErrorBoundary extends React.Component {
constructor(props) {
super(props),
this.state = { hasError: false },
}
static getDerivedStateFromError(error) {
return { hasError: true },
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo),
}
render() {
if (this.state.hasError) {
return
Κάτι πήγε στραβά ! Επικοινωνήστε με τον διαχειριστή
;
}
return this.props.children,

}
}