#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
, они должны использоваться в качестве верхнего родительского элемента.