Explicar la nueva API de contexto en React 16

La versión anterior de Context Api era experimental, mientras que la nueva versión en React 16+ es más estable y eficiente. La API de contexto se usa para pasar variables globales en cualquier parte del código. Ayuda cuando existe la necesidad de compartir el estado entre muchos componentes anidados. Es liviano y más fácil de usar, para crear un contexto solo necesita llamar a React.createContext(). No es necesario instalar otras dependencias o bibliotecas de terceros como redux para la gestión del estado.

Tiene dos propiedades Proveedor y Consumidor. El Proveedor actúa como un padre, pasa el estado a sus hijos, mientras que el Consumidor usa el estado que se ha pasado.

Prerrequisitos: conocimiento sobre reactJs

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3: Crearemos dos archivos nuevos, uno es Context.js para crear nuestro contexto y otro archivo llamado WelcomePage.js para crear un componente llamado welcomePage .

Estructura del proyecto: Se verá así.

Ejemplo: en este ejemplo, mostramos una página que muestra el nombre y la identificación del usuario que utiliza la API de contexto. En la carpeta src, cree un archivo como Context.js , en el archivo create context aquí lo nombramos como UserContext. El contexto surge con las propiedades consumidor y proveedor, por lo que lo mantenemos en constante Proveedor y Consumidor.

import React from 'react';
  
const UserContext =React.createContext();
  
export const Provider = UserContext.Provider;
export const Consumer = UserContext.Consumer;

En el archivo .js, estamos creando un componente simple que muestra un mensaje simple con el nombre y la identificación que pasaremos a través del proveedor que estamos creando a continuación en index.js

import React from "react";
import { Consumer } from "./Context";
  
const WelcomePage = () => {
    return (
        <div>
            <h1>Welcome User :</h1>
            <Consumer>
                {(value) => (
                    <h2>
                        Name: {value.name} id :{value.id}{" "}
                    </h2>
                )}
                //this function takes the value as prop
            </Consumer>
        </div>
    );
};
  
export default WelcomePage;

Envolvemos el componente de la aplicación dentro del proveedor y también pasamos el valor si no proporcionamos ningún valor, en este caso, mostrará una página en blanco, aquí estamos pasando el nombre y la identificación al valor.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import {Provider} from './Context'
  
ReactDOM.render(
  <Provider value={{name:"Geeksforgeeks", id:195}}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Ahora, importamos nuestro componente WelcomePage a App.js , para que cuando lo ejecutemos, el componente WelcomePage aparezca en la pantalla.

import WelcomePage from "./WelcomePage";
  
function App() {
  return (
    <div className="App">
       <WelcomePage/>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Producción:

Referencia: https://reactjs.org/docs/context.html