Perché usare l'API Context?

• Per capire perché usare Context-API Per prima cosa vedremo cosa è Props-Drilling .

• Guarda l'immagine dell'albero dei componenti di sinistra.
• Potrebbe esserci il caso in cui un componente figlio nella parte inferiore dell'albero avrà bisogno di dati .ma, i componenti contenitore o i componenti figlio al centro potrebbero non aver bisogno di quei dati.
• In questo caso, anche se il Componente centrale non ha bisogno di dati, deve riceverli solo per passarli al Componente figlio.
• Se la tua applicazione è troppo grande, ciò causerà un grosso problema. Gli sviluppatori devono continuare a passare i dati da un componente al successivo.
• Questo problema è noto come puntelli di perforazione.

• In Context-API viene creato uno spazio di archiviazione separato all'esterno dell'albero dei componenti in cui dobbiamo archiviare i dati.
• Ora, se abbiamo bisogno di quei dati all'interno di qualsiasi componente, possiamo accedere direttamente ai dati da Context-API.
• Ora vediamo come funziona con un esempio.

• Per CreateContext possiamo usare createContext() di React .
• Una volta creato UserContext, dobbiamo esportarlo.
• Ora per aggiungere dati all'interno di Context dobbiamo avvolgere l'elemento padre con <UserContext.Provider> o <UserProvider>.
• una volta che eseguiamo il wrapping con Wrapper, dobbiamo passare i dati nell'attributo value .

1) Nel componente funzione.

2) Nei metodi del ciclo di vita del componente di classe.

3) Nel metodo di rendering del componente di classe.

1) Nel componente funzione:-

• All'interno di componenti funzionali o hook, dobbiamo usare useContext() Hook fornito dal pacchetto React.
• Ora dobbiamo importare UserContext e passarlo a useContext() .
• useContext(UserContext) restituirà i dati dell'utente all'interno di Context.che possiamo utilizzare ulteriormente.

• Il modo più comune per accedere a Context da un componente di classe è tramite static contextType.
• Se hai bisogno del valore di Context al di fuori di rendero in un metodo del ciclo di vita, lo utilizzerai in questo modo.

• Il modo tradizionale per recuperare i valori Context era avvolgere il componente figlio nel file Consumer.
• Da lì, saresti in grado di accedere al valore prop come props.
• Potresti ancora vederlo, ma è più un modo legacy di accedere a Context.