Что на самом деле делает useContext?
Меня очень зацепил React, но у меня возникает один большой вопрос относительно useContext. Это довольно запутанно, чтобы действительно знать, как это работает внутри.. Как будто это волшебно работает.
Итак, у меня есть в моем основном модуле это:
export const Context = React.createContext(SOMEVALUE) // why set this initial value here
const [value, setValue] = useState(SOMEVALUE) // why set this here again?
return(
<Context.Provider value = {[value, setValue]}> // why do i have to pass this inital value here?
<App />
</Context.Provider>
)
Далее какой-то модуль внутри
import { Context } from './Main' // why import this when everything was passed?
...
const [value, setValue] = useContext(Context.offline) // what does this help?
А теперь мой вопрос:
Почему требуется импортировать Context из Main и как React подключается к состоянию, используя это?
Ответы 1
- Для чего передается значение createContext?
export const Context = React.createContext(SOMEVALUE)
Значение, переданное в React.createContext, является резервным значением, которое будет использоваться ТОЛЬКО в том случае, если Context.Consumer используется вне его Context.Provider. Это отличается от начального значения.
- Почему в useState используется одно и то же резервное значение?
const [value, setValue] = useState(SOMEVALUE)
Использование одного и того же значения в качестве начального значения и резервного значения является предпочтительным и будет меняться в зависимости от варианта использования. Эта часть фактически устанавливает начальное значение и предоставляет механизм для отслеживания и изменения этого значения.
- Почему я должен передать начальное значение Context.Provider?
<Context.Provider value = {[value, setValue]}>
Context.Provider действует как издатель в системе издатель/подписчик. Он будет транслировать эти значения, установленные здесь, любому из соответствующих Context.Consumers. Он не отслеживает значение и не предоставляет механизмов для изменения этого отслеживаемого состояния. useState сверху делает это. Context.Provider просто «транслирует» значение и функцию для изменения этого значения.
- Почему я должен импортировать Context, который я создал?
import { Context } from './Main'
const [ value, setValue ] = useContext(Context)
import { Context } импортирует объект Context, который вы создали и экспортировали из './Main'. Тот же объект Context, который вы используете для рендеринга Provider. Это используется, чтобы убедиться, что при подписке указан правильный Provider.
До хуков вы подписывались на контекст реакции через: static contextType = MyContext в классе или с помощью <MyContext.Consumer>. useContext — это просто еще один API для этого в качестве ловушки. Вы должны передать ему объект Context, чтобы он знал, на какой Context.Provider подписаться, поскольку их может быть сколько угодно.
Документация по контексту здесь
Без проблем. import { Context } импортирует объект Context, который вы создали и экспортировали из './Main'. Тот же Context объект, который вы используете для рендеринга Provider первого фрагмента кода. Я обновлю ответ.
Но импорт этого контекста просто создаст новый контекст. Я имею в виду, что состояние уже не то же самое? Это в основном просто скопированная функция. Я мог бы также создать контекст с тем же именем во втором файле, и это привело бы к тому же результату?
В первом файле вы создаете контекст и используете его провайдера. Во втором файле все, что вы делаете, это используете этот объект Context в качестве ссылки. Он находит Provider из этого объекта Context и подписывается на него.
Это все объясняет. Спасибо вам всем.
Большое спасибо! Это очень полный ответ. Но я до сих пор не знаю, как ``` import {Context } ``` делает какую-либо связь с Context в высшем классе. В противном случае я думаю, что понял.