Contexto em React.js

Props são argumentos passados ​​para componentes React. no React, usamos props para transferir dados do componente pai para o componente filho. Às vezes, precisamos passar dados do componente pai para o neto e temos que anotar os adereços em cada etapa do componente até chegarmos ao componente rico para o neto conforme precisamos, se tivermos três níveis de profundidade do pai para o filho, isso será um muitos adereços de escrita.

Existem maneiras de não transferir dados passo a passo, em vez de diretamente para o componente neto. uma forma é React-Redux, que é uma forma de criar uma loja e coletar dados importantes nessa loja e usar quaisquer dados dentro da loja para qualquer componente que quisermos.

outra forma é usando contexto, ou seja, basicamente, criando um novo componente, este novo componente tem todos os dados que adicionamos como valor, e circundando este componente a outros componentes. Assim, poderíamos compartilhar esse valor com os componentes ao redor.

Vamos explicar esse conceito com um exemplo;

Peguei esse exemplo de um vídeo do YouTube que explicava o conceito de maneira muito agradável e suave.

Com este exemplo, temos uma matriz movies que contém 3 filmes com seus nomes, preços e id's. Com este aplicativo, vamos mostrar esses recursos no navegador.

na imagem abaixo, eu tenho uma pasta de aplicativo e 3 componentes pertencentes a essa pasta, e os cercando com MovieProvider.

<MovieProvider>

<Nav />

<MovieList />

<AddMovie />

<MovieProvider />

Mencionarei este MovieProvider em um minuto.

Criei o arquivo MovieContext.js dentro do src, esse arquivo basicamente armazena todos os dados dos filmes com useState.

Temos esse arquivo que contém todos os filmes, como eu poderia usar esses filmes em outros componentes sem usar a funcionalidade de adereços?

Em primeiro lugar, precisamos importar createContext do react,

e, em seguida, forte isso em um Const MovieContext, como na linha 4,

Estamos exportando isso, porque precisamos usar isso em outros componentes.

Temos também, a função MovieProvider, que tem todos os filmes, voltando

<MovieContext.Provider value = {[movies, setMovies]}>

{props.children}

</MovieContext.Provider value = {[movies, setMovies]}>

MovieContext.Provider é uma maneira de passar dados para componentes filhos, criamos primeiro o contexto, depois aplicamos o objeto provedor a ele, aplicando a todos os filhos que este <movieContect.Provider tem.

Vejamos o conceito de useContext,

como você pode ver na imagem abaixo, temos um componente MovieList, que pertence ao componente App, este componente precisa ter todos os filmes que poderíamos fazer, movies.map e ter <Movie /> para cada filme componente,

Então, como trazemos todos os filmes do MovieContext para este componente até aqui?

Portanto, usamos a função useContext e importamos MovieContext para trazer todos os filmes para o componente MovieList. Quando fazemos isso, todo o valor dentro do MovieContext.Provider virá para o componente MovieList e

na linha 11, assinamos os filmes com isso,

const [movies, setMovies] = useContext (MovieContext)

fazemos o resto com a linha 16 para ter o componente individual de cada movimento.

Só para mostrar outro componente que usa useContext aqui na imagem abaixo, temos um componente Nav.js, que também pertence ao App.js, aplicamos as mesmas regras que fizemos no componente MovieList, importamos useContext e aplicamos linha 8 com useContext.

Isso é tudo, você pode ser capaz de usar todos os filmes onde quiser.

Recursos