Tutorial de l'API de context de React: què és el context i com utilitzar-lo!

Bloc

Tutorial de l'API de context de React: què és el context i com utilitzar-lo!

Tutorial de l'API de context de React: què és el context i com utilitzar-lo!

L’API de context de React s’ha convertit en l’eina de gestió estatal que s’elabora per a molts, sovint substituint completament Redux. En aquest tutorial ràpid, veureu una introducció a què és el context i com s'utilitza.

Penseu en aquest arbre, en què les caixes inferiors representen components separats:

Arbre de components

Podem afegir fàcilment estat als components inferiors, però fins ara l’única manera de passar dades al germà d’un component era moure l’estat a un component superior i tornar-los a passar al germà mitjançant accessoris.

Passar dades per accessoris

Si més endavant descobrim que el germà del component amb estat també necessita les dades, hem de tornar a aixecar l'estat i tornar-lo a passar:

Transmetent l'estat a través de diversos nivells

Tot i que aquesta solució funciona, els problemes comencen si un component d’una branca diferent necessita les dades:

Un component més distant requereix dades

En aquest cas, hem de passar l’estat des del nivell superior de l’aplicació a tots els components intermediaris fins al que necessita les dades a la part inferior, tot i que els nivells intermedis no els necessiten. Aquest procés tediós i que consumeix molt de temps es coneix com perforació de puntal .

Perforació de puntal

Aquí és on entra l'API de context. Proporciona una manera de passar dades per l'arbre de components mitjançant un parell de proveïdor-consumidor sense haver de passar accessoris per tots els nivells. Penseu-ho en els components que juguen a Catch amb dades: és possible que els components intermediaris ni tan sols sàpiguen que passa res:

Context en acció

Per demostrar-ho, crearem aquesta divertida imatge de commutació del dia a la nit (i molt útil).

Si voleu veure el codi complet, comproveu-ho el parc infantil Scrimba per a aquest article .

Crea context

Per començar, creem un nou context. Com que volem que tota l'aplicació hi tingui accés, anem a index.js i emboliqui l'aplicació a ThemeContext.Provider.

També passem el value puntal al nostre proveïdor. Això conté les dades que volem desar. De moment, només fem un codi dur a 'Day'.

import React from 'react'; import ReactDOM from 'react-dom'; import ThemeContext from './themeContext'; import App from './App'; ReactDOM.render( , document.getElementById('root') );

Consum de context amb contextType

Actualment, a App.js, simplement retornem el component.

import React from 'react'; import Image from './Image'; class App extends React.Component { render() { return ( ); } } export default App;

El nostre objectiu és utilitzar Context per canviar els classNames a Image.js de Day a Night, en funció de la imatge que vulguem representar. Per fer-ho, afegim una propietat estàtica al nostre component anomenada ContextType i, a continuació, utilitzeu la interpolació de cadenes per afegir-la als classNames de component.

Ara, els classNames contenen la cadena de value prop. Nota: M'he mogut ThemeContext al seu propi fitxer per evitar un error.

import React from 'react'; import Button from './Button'; import ThemeContext from './themeContext'; class Image extends React.Component { render() { const theme = this.context; return ( ); } } Image.contextType = ThemeContext; export default Image;

Context.Consumidor

Malauradament, aquest enfocament només funciona amb components basats en classes. Si ja heu après sobre Hooks a React, sabreu que podem fer pràcticament qualsevol cosa amb components funcionals en aquests dies. Per tant, per a una bona mesura, hauríem de convertir els nostres components en components funcionals i després utilitzar ThemeContext.Consumer component per passar informació a través de l'aplicació.

Això es fa embolicant els nostres elements en una instància de i dins d'això (on va el children), proporcionant una funció que retorna els elements. S'utilitza el patró de representació de renderització on proporcionem una funció regular com a nen que retorna alguns JSX per renderitzar.

import React from 'react'; import Button from './Button'; import ThemeContext from './themeContext'; function Image(props) { // We don't need this anymore // const theme = this.context return ( {theme => ( )} ); } // We don't need this anymore // Image.contextType = ThemeContext; export default Image;

Nota: També hem d’embolicar el component a - això ens permet afegir funcionalitat al botó més endavant.

import React from 'react'; import ThemeContext from './themeContext'; function Button(props) { return ( {context => ( Switch )} ); } export default Button;

Proveïdor de context d’extracció

Actualment, passem un valor codificat per mitjà del proveïdor, però el nostre objectiu és canviar entre el dia i la nit amb el nostre botó.

Això requereix moure el nostre proveïdor a un fitxer separat i posar-lo al seu propi component, en aquest cas, anomenat ThemeContextProvider.

import React, { Component } from 'react'; const { Provider, Consumer } = React.createContext(); class ThemeContextProvider extends Component { render() { return {this.props.children}; } } export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Nota: ara la propietat del valor s’està gestionant al nou fitxer ThemeContext.js i, per tant, s’hauria d’eliminar d’index.js.

Canvi de context
Per connectar el botó, primer afegim estat a ThemeContextProvider:

import React, { Component } from 'react'; const { Provider, Consumer } = React.createContext(); // Note: You could also use hooks to provide state and convert this into a functional component. class ThemeContextProvider extends Component { state = { theme: 'Day' }; render() { return {this.props.children}; } } export { ThemeContextProvider, Consumer as ThemeContextConsumer };

A continuació, afegim un mètode per canviar entre el dia i la nit:

toggleTheme = () => { this.setState(prevState => { return { theme: prevState.theme === 'Day' ? 'Night' : 'Day' }; }); };

Ara canviem el nostre value propietat a this.state.theme de manera que retorni la informació de l'estat.

render() { return {this.props.children}; } }

A continuació, canviem value a un objecte que conté {theme: this.state.theme, toggleTheme: this.toggleTheme}, i actualitzeu tots els llocs on utilitzem un valor únic per cercar theme en un objecte. Això significa que cada theme esdevé context i totes les referències a theme a mesura que el valor esdevé context.theme.

Finalment, li diem al botó que escolti el onClick esdeveniment i després disparar context.toggleTheme - s'actualitza el consumidor que utilitza l'estat des del proveïdor. El codi del botó té aquest aspecte:

import React from 'react'; import { ThemeContextConsumer } from './themeContext'; function Button(props) { return ( {context => ( Switch )} ); } export default Button;

El nostre botó ara canvia la imatge entre la nit i el dia amb un sol clic.

Advertiments del context

Com totes les coses bones del codi, hi ha algunes advertències a l’hora d’utilitzar Context:

python per a l'anàlisi financera i el comerç algorítmic
  • No utilitzeu Context per evitar perforar puntals només una o dues capes. El context és ideal per gestionar l'estat que necessiten grans parts d'una aplicació. Tot i això, la perforació de l’accionament és més ràpida si només passeu informació per un parell de capes.

  • Eviteu utilitzar Context per desar l'estat que s'hauria de mantenir localment. Per tant, si heu de desar les entrades de formulari d’un usuari, per exemple, utilitzeu l’estat local i no el context.

  • Emboliqueu sempre el proveïdor amb el pare comú més baix possible de l’arbre, no amb el component de nivell més alt de l’aplicació. No cal excés.

  • Finalment, si passeu un objecte com a valor propici, superviseu el rendiment i refactoritzeu-lo si cal. Probablement no serà necessari a menys que es noti una disminució del rendiment.

Embolicar

Aquest exemple és bastant senzill i probablement seria més fàcil posar l'estat a l'aplicació i transmetre'l mitjançant accessoris. Tanmateix, amb sort es demostra el poder de tenir consumidors que puguin accedir a les dades independentment dels components que hi ha a sobre de l’arbre.

Codificació feliç :)

# react-js #react # react-hooks #javascript #api