Что действительно использует useContext?

Question

Я довольно заинтригован 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?

---

Теперь вот мой вопрос:

Почему требуется импорт контекста из Main и как React устанавливает соединение с состоянием, используя это?

Answer 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 подписаться, поскольку их может быть любое количество.

Документация для контекста здесь