Ho una domanda riguardante il pattern del componente Container, che purtroppo è definito solo in una frase:
A container does data fetching and then renders its corresponding sub-component. That’s it. —Jason Bonta https://reactpatterns.com/#container-component
È mai possibile avere un caso in cui vogliamo avere due contenitori e un componente, un po 'come una gerarchia ereditaria? Quindi questa non è una domanda per confrontare le due opzioni sottostanti, ma principalmente, chiedendo Il pattern è pensato per option1?
Supponiamo di avere il seguente:
API calls: A, B, C
Component Type1: needs API call A & C
Component Type2: needs API call B & C
Qual è il modo migliore di utilizzare il modello di contenitore qui?
Opzione 1)
ContainerA: calls API A
ContainerB: calls API B
ContainerC: calls API C
Render tree:
'ContainerA' -> 'ContainerC' -> 'Component'
'ContainerB' -> 'ContainerC' -> 'Component'
File:
ContainerA
ContainerB
ContainerC
Component
Opzione 2)
ContainerAC: calls API A and API C
ContainerBC: calls API A and API C
Render tree:
'ContainerAC' -> 'Component'
'ContainerBC' -> 'Component'
File:
ContainerAC
ContainerBC
Component
Pro / Contro
- L'opzione 1 consente a molti contenitori di riutilizzare il codice del contenitore C invece di duplicarlo, ma sembra imitare l'ereditarietà che reagisce dice di non fare? ( link ) Ma la definizione tecnica del pattern Container non vieta questo utilizzo?
- L'opzione 2 è più semplice, ma duplica il codice.
La mia domanda era, L'opzione 1 può mai essere un caso d'uso accettabile per il componente-contenitore ReactJS? Grazie!