I criteri più ovvi per me riguardano la riutilizzabilità delle componenti e la gestione dello stato interno, ma a parte questo ci sono altri buoni motivi?
Ad esempio, potrei avere un componente chiamato ArticleFeed.js. All'interno di ArticleFeed.js potrei avere un componente figlio noto come ArticleFeedItem.js O potrei semplicemente avere un oggetto markup html in ArticleFeed.js che non è un componente react, ma invece è solo il markup per il 'item feed dell'articolo'.
Ho avuto esattamente la stessa domanda quando ho iniziato a lavorare sulla ricostruzione di una nuova pagina di destinazione, usando Vue. Ho attraversato diverse fasi di refactoring di tutti i codici e la regola empirica è leggibilità rispetto alla riusabilità .
Just like splitting a large code block up into several functions with descriptive names - bigblind
Fase 1: Ogni pagina come componente , come vengono utilizzati nel router. Quindi, ogni pagina è una grande porzione di codici
Fase 2: Ogni parte ripetuta come componente , poiché non voglio copiare e incollare i codici, vale a dire quello che stai facendo.
Fase 3: Ogni sezione come componente , quando ho iniziato a pensare di scrivere HMTL come funzioni di scrittura.
<div class="landingpage careers">
<section class="landingpage-hero">
<app-navbar></app-navbar>
<landingpage-header></landingpage-header>
</section>
<main class="landingpage-main">
<div class="desktop-section-row">
<punchline-section></punchline-section>
<benefits-section></benefits-section>
</div>
<personas-section></personas-section>
<values-section></values-section>
<contact></contact>
</main>
<app-footer></app-footer>
</div>
Il componente Vue finale è così, e mi sforzo di ridurre la profondità della gerarchia al suo interno.
Oltre al riutilizzo, è spesso utile anche per la leggibilità. Proprio come suddividere un blocco di codice di grandi dimensioni in più funzioni con nomi descrittivi, può essere utile interrompere un componente che esegue il rendering di un albero di grandi dimensioni, in componenti di dimensioni statiche più piccole.
Leggi altre domande sui tag reactjs