Порядок поставщиков контекста React

#reactjs #react-hooks

Вопрос:

Если у меня несколько поставщиков контекста, имеет ли значение порядок? Похоже, что так оно и есть, но я не могу найти никакой официальной документации по этому поводу.

Например:

 lt;SessionProvidergt;  lt;AuthProvidergt;  lt;App /gt;  lt;/AuthProvidergt; lt;/SessionProvidergt;  

Вышесказанное, по-видимому, выполняет useEffect код внутри AuthProvider , прежде чем он выполнит его внутри SessionProvider (оба из которых используют контекст React).

Спасибо за помощь!

Комментарии:

1. Это не должно иметь значения, если они не взаимодействуют друг с другом. Они выполняются изнутри, потому AuthProvider что получают lt;App /gt; как children опору, а затем SessionProvider получают lt;AuthProvidergt;lt;App /gt;lt;/AuthProvidergt; как children опору.

2. @PatrickRoberts Понял, в этом есть смысл, спасибо! По какой-то причине я думал, что все будет выполняться сверху вниз, но, возможно, это просто мое непонимание того, как реагируют компоненты.

3. Как правило, это происходит, только снизу вверх, когда JSX вложен. Но если бы все ваши компоненты были мелкими, то это было бы сверху вниз. В любом случае, вам все равно не следует полагаться на порядок выполнения, потому что это означало бы, что вы сохраняете состояние за пределами React.

4. А, понятно, спасибо за разъяснение. Основная причина, по которой я завишу от порядка выполнения, заключается в том, что в AuthProvider я делаю запрос на серверную часть для аутентификации пользователя и получения доступа. Затем, внутри SessionProvider , я делаю еще один запрос, который получает данные сеанса, которые зависят от того, аутентифицирован пользователь или нет AuthProvider . Возможно, есть лучший способ сделать это, но сейчас, похоже, все работает.

Ответ №1:

На самом деле, если вы не используете session контекст внутри auth контекста или не используется какой-либо вложенный контекст, это не имеет значения.

Но если вы используете некоторые данные SessionProvider , полученные изнутри AuthProvider , конечно Session , данные контекста должны быть доступны внутри AuthProvider , следовательно Session , они должны использоваться в качестве верхнего родительского элемента.