Реагировать на собственный метод жизненного цикла, чтобы выполнить код навигации (перейти на другой экран) после завершения цикла избыточности

Question

Я использую Redux и React Navigation в моем приложении, где я делаю некоторые вызовы API, у меня есть вопрос, что после успешного завершения моего цикла приращения, какой метод жизненного цикла реагирующего компонента мне придется использовать для перехода к следующему экрану и почему?

• Пользователь нажал на логин после помещения своих учетных данных на экране входа в систему.
• Выполнил редукцию входа в систему и вернул успех
• После успеха , мои реквизиты экрана входа в систему изменились, и я хочу перенаправить на следующий экран.
• В каком методе мне нужно будет ввести код навигации, например

this.props.navigation.navigate("DashoardScreen');

Когда я прошел через различные поиски и обнаружил, что componentDidUpdate() или shouldComponentUpdate() будет правильным методом для выполнения этого. Какой метод на самом деле я должен рассмотреть и почему?

Answer 1

Обычно его не следует вызывать ни в одном методе жизненного цикла, но он должен находиться внутри вашего loginHandler (обработчик для нажатия кнопки входа в систему), сразу после асинхронного c действия входа в систему вернулось успешно.

Answer 2

Вам не нужно (и в идеале не нужно) помещать логин навигации c внутри компонента Login. Что если есть несколько экранов входа? Вы не хотите копировать этот код навигации везде. Что если вы захотите установить промежуточные экраны после входа в систему, но до перехода в приложение? Что если вы хотите при определенных условиях перехватить вход в систему, например, чтобы выполнить некоторые асинхронные c проверки перед навигацией? Если вы продолжите добавлять эту логику c внутри компонентов, она быстро превратится в беспорядок

Вы хотите вызвать навигацию в вашем thunk или saga (или любом другом обработчике) у вас есть) после того, как вы закончили вход в систему. Обычно вы действительно получаете доступ только к navigation из this.props, который доступен только в компоненте, но это не единственный способ доступа к навигации. Чтобы иметь возможность перемещаться за пределы компонента, используйте Навигация без реквизита навигации

Answer 3

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

С другой стороны, shouldComponentUpdate используется для оптимизации частоты рендеринга вашего компонента, например, как вы REACT изменяете реквизиты / состояние, возвращая true, если обновление должно вызвать рендеринг или false в противном случае.