ReactNavigation & Redux: все экраны перерисовываются с использованием StackNavigator при изменении состояния редукции

Question

Я использую Redux с ReactNavigation в проекте React Native.

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

Я хочу сохранить предыдущий экран встек, чтобы пользователь мог вернуться к предыдущему экрану.Я использую this.props.navigation.push("UserScreen"), чтобы поместить новый экран в стек.

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

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

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

Решение Поэтому я думаю использовать componentShouldUpdate на всех экранах пользователей и проверить, является ли он активным экраном return true другимразумно предотвратить повторную визуализацию и сохранить экран без изменений.

У кого-нибудь есть лучшее решение?есть ли пример кода.

Answer 1

Уже немного поздно, но надеюсь, что это поможет другим, у кого те же проблемы.Вот мое решение.

1. При переходе к экрану обновите что-либо в параметрах навигации, чтобы сообщить, что экран был сфокусирован, и отключите фокусное состояние остальных.
2. В проверке компонента сфокусированостатус перед рендерингом.

Пример кода:

SideMenuNav.navigationOptions = ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
navigation.state.routes.forEach((route, ind) => {
    if (!route.params) route.params = {}
    if (ind === navigation.state.index) route.params.isFocused = true
    else route.params.isFocused = false
})

Подробнее на:

https://reactnavigation.org/docs/en/redux-integration.html

https://medium.com/async-la/a-stately-guide-to-react-navigation-with-redux-1f90c872f96e

Answer 2

, если у вас одинаковые reducer, добавленные в connect во всех представлениях, вызывают эту проблемуЧтобы избежать этой проблемы, рекомендуется очень разумно разделить редукторы.

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

• componentShouldUpdate
• селекторы .

pureComponent также рекомендуется, но в моем случае это не имеет большого значения.

Пример для shouldComponentUpdate:

shouldComponentUpdate(nextProps: Props) {
    if (objectNotEquals(this.props.items, nextProps.items) || (this.props.collectionLooksSelected !== nextProps.collectionLooksSelected) || objectNotEquals(this.props.executingRequest, nextProps.executingRequest)) {
      return true;
    }

    return false;
  }

selectors примеров можно найти по ссылке, которая оставляет вас.