reactjs / reactjs/react.dev

context.md example, when not to use contexts

Aperta
#3,288 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
JavaScript
Stelle
11.8k
Fork
7.9k
Merge medio
1g 11h
PR unite (30g)
11

Descrizione

I'm sorry if this comes across the wrong way. I understand the concept of contexts. What I don't quite understand is this example when to not use them.

It shows this example

<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

Being replaced by this

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// Now, we have:
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}

and claims

This inversion of control can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components.

My gut reaction was the opposite. The Page component now needs to know details of the NavigationBar (it needs to know what elements/components NagivationBar needs. The Page component seems like it should have zero knowledge of what's in the NavigationBar. It should be passing down some opaque hunk of data and letting NavigationBar deal with it. That it does need to know the details is a strong coupling, not a loose coupling.

Is that a bad example that's trying to illustrated some bigger point but the example is just poorly chosen or am I maybe mis-understanding something?

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia leggendo la sezione di context.md che contiene l’esempio «quando non usare i contexts» e la spiegazione circostante. Confronta il vantaggio di inversion-of-control dichiarato nell’esempio con la preoccupazione per l’accoppiamento sollevata qui, quindi chiarisci o rivedi l’esempio in modo che siano chiare le indicazioni previste e i compromessi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.