Как всегда, это пост, который я использую, чтобы помочь что -то научить себя! Надеюсь, это вам тоже поможет.
Этот пост действительно предполагает базовые знания реагирования со степенью знакомства с концепцией состояния.
Состояние – реинтродукция
Я не был бы удивлен, если бы вы услышали о USESTATE , который является крючком, предоставляемым React, который позволяет нам динамически устанавливать информацию и контролировать ее таким образом, чтобы наши компоненты могли измениться вместе с обновлениями этой информации.
import React, { useState } from 'react';
function App () {
const [ playList, setPlayList ] = useState ([
{
id:1,
genre:"Alternative",
title:"You and I",
artist:"Toro y Moi",
track: "/tracks/you_and_i.mp3"
}, {
id:2,
genre:"Rock",
title:"Khuda Bhi Aasman",
artist:"Khruangbin",
track: "/tracks/khuda_bhi_aasman.mp3"
}, {
id:3,
genre:"Rock",
title:"Goodie Bag",
artist:"Still Woozy",
track: "/tracks/goodie_bag.mp3"
}
])
return(
Примите это приложение выше … Что ж, давайте просто скажем это одно кусок, из этого, небольшое приложение …
Информация, которую мы вкладываем в состояние, – это наш плейлист, и мы передаем его через реквизит. Прохладный. Мы можем представить, что Musicbox вероятно, будет использовать информацию для заполнения некоторого интерфейса.
Но что, если наше приложение не так мало?
Что, если вложенные внутри музыкальной коробки – это десятки элементов, отвечающих за различные функции, которые могут включать в себя:
- Интерфейс плейлиста, который можно повторно порядок, добавлен, удален из и т. Д.
- Компонент изображения альбома, который использует предварительно ассоциированное отношение к игре трека.
- Компонент аудио визуализации, который отображает эквалайзер, который реагирует на воспроизведение музыки в настоящее время.
- Предлагаемый компонент треков, который берет жанр и возвращает треки такого же вида.
Может быть, все вышеперечисленное ???
Если бы мы хотели испечь всю эту функциональность в нашем приложении, скорее всего, у нас будет тонна компонентов, в различных ветвях приложения, что все это потребует доступа к текущему плейлист ценность. Кроме того, было бы безопасно, что не каждый компонент понадобится каждое значение Внутри из плейлист Анкет Мы все еще могли бы пройти все вручную через Опоротное бурение Но это может стать громоздким, если мы также передаем другие значения опоры, объявленные в более мелких подразделах приложения.
Введите контекст
Эта точная дилемма является точной причиной контекст существуют. Представьте себе, что если вам нужно только заявить о своем состоянии, что целую приложение может понадобиться кусочки в одном месте, и назвать эти значения только тогда, когда и где они вам нужны, нет необходимости в бурении для опоры!
Так что теперь нам нужно сделать это вместо этого для нашего приложения.
Шаг 1: Создать контекст и поставщик
Думай об этом так, Контекст это контейнер, Поставщик это то, что позволяет вашим компонентам приложения встать в контейнер.
Давайте настроим этот контекст для нашего музыкального приложения и вместо этого заберем наш удивительно маленький плейлист!
import React,{ useState } from "react";
//Container
const PlaylistContext = React.createContext();
//Allows access to the container
function PlaylistProvider({ children }) {
const [ playList, setPlayList ] = useState ([
{
id:1,
genre:"Alternative",
title:"You and I",
artist:"Toro y Moi",
track: "/tracks/you_and_i.mp3"
}, {
id:2,
genre:"Rock",
title:"Khuda Bhi Aasman",
artist:"Khruangbin",
track: "/tracks/khuda_bhi_aasman.mp3"
}, {
id:3,
genre:"Rock",
title:"Goodie Bag",
artist:"Still Woozy",
track: "/tracks/goodie_bag.mp3"
}
])
return(
{children}
;
)
}
export { PlaylistContext, PlaylistProvider };
Бум
Шаг 2: строительство моста
До сих пор мы только построили контейнер для хранения и средства для предоставить доступ к этому. Теперь мы должны подключить эти средства доступа к нашему приложению.
Для этого мы просто оберкиваем большинство из родителей, в котором будут разместиться все компоненты, которые могут потребовать доступа к контекстной информации с нашим Поставщик Анкет
Давайте вернемся к нашим ранним Приложение компонент и посмотрите, как это выглядит сейчас.
import React from 'react';
//This is our means of access
import { PlaylistProvider } from "./user";
function App () {
return(
)}
export default App
Точно так же любой компонент, отображаемый внутри Musicbox или ниже теперь может получить доступ к нашему государству плейлиста. Однако до сих пор мы просто построили мост из нашего контекста в компоненты, которые должны получить к ним доступ. Нам все еще нужно пересечь мост и вернуть информацию.
Шаг 3: пересечение моста
Итак, вы окажетесь в компоненте для своего музыкального приложения, которое имеет глубину 10 слоев, и теперь вам нужна новая часть информации плейлиста. Посмотрим, как получить доступ к этой информации.
import { useContext } from 'react';
//Bridge crossed
import { UserContext } from "./user";
function Artists () {
//Back across the bridge now with data
const playlist = useContext(PlaylistContext);
const playlistArtists = playlist.map(song => {
return Там у тебя это есть! Контекст в использовании. Какой отличный способ очистить нашу кодовую базу и помочь изолировать нашу информацию в максимально возможных местах! Теперь у вас может быть соблазн просто использовать Контекст Всякий раз, когда вы хотите отслеживать состояние в своем приложении. Давайте рассмотрим, почему это не такой большой выбор.
«Не нужно беспокоиться о необходимости передавать реквизит!» –Ты возможно, В первый раз, когда вы услышали о контексте
Контекст против Состояние
Контекст предоставляет нам способности, очень похожие на состояние. Оба имеют возможность контролировать данные, и управляющие компонентами повторно используются при обновлении данных. Тем не менее, контекст – это то, что, по словам людей, которые его написали, должны быть использованы экономно Анкет Это связано с тем, что, хотя повторное использование компонентов все еще возможно с контекстом, в наших приложениях гораздо более интенсивно.
Оригинал: “https://dev.to/dandesantis/state-or-context-the-answer-will-shock-you-4cj5”