Обновление в React Native с помощью 1 строки кода

Исходя из фона Vue.js, я сталкивался с компонентами, которые размонтировались каждый раз, когда вы переходили к другому маршруту/компоненту. Итак, как вы можете видеть, использование методов жизненного цикла, таких как mounted или created, было распространенным шаблоном для повторного запуска логики, если это необходимо. Вам может понадобиться это, например. в ленте новостей, если вы возвращаетесь к ленте с экрана элемента ленты и вам нужно показать новейшую ленту из вашего API.

Итак, вернемся к React Native. Я оказался в этом новом сценарии, когда компоненты не монтируются/не монтируются с экрана на экран. Так что делать? Оказывается, проблема была в навигации.

Я использую React Navigation, который позволяет создавать события для отображения компонентов, которые на них подписаны. Благодаря этой функциональности вы можете использовать событие, которое вам больше всего подходит. Вы получаете willFocus, didFocus, willBlur и didBlur.

В моем конкретном случае использования мне нужно было выполнить повторную загрузку при возврате с предыдущего экрана. Когда пользователь нажимал эту кнопку «Назад», мне нужно было отразить изменения, поэтому я использовал willFocus для получения сразу, до начала рендеринга.

Я подумал об использовании willBlur на экране элемента канала, прежде чем вернуться к основному каналу, сохранив ответ на выборку в магазине, но willFocus работал очень хорошо.

Переходя к делу, чтобы решить, что вам нужен один лайнер:

this.props.navigation.addListener( "willFocus", e => this.fetch())

Вы можете вызвать этот слушатель для нового свойства вашего класса или в методе жизненного цикла.

Как вы извлекаете, как всегда, зависит от вас, но с React Navigation и слушателями повторная загрузка становится простой и понятной.

Существуют и другие варианты использования, в которых такие решения, как QueryRenderer от Relay, будут тем, что вам нужно. Это может включать более сложные сценарии, такие как необходимость извлечения переднего/фонового плана, но на данный момент и для меня это было все, что мне было нужно. Надеюсь, это поможет и вам. Удачной перепрошивки.