Рендеринг текущего экрана после изменения состояния - PullRequest
Новая
       6

Рендеринг текущего экрана после изменения состояния

0 голосов
/ 23 мая 2018

Я использую act-native-router-flux , и для изменения состояния некоторых экранов я делаю следующее:

index.js 

  showMenuIcon(value) {
    this.setState({
      viewMenu: value
    });
  }

...
        <Scene
          renderMenuButton={this.showMenuIcon}
          key="menu"
          component={Services}
          hideNavBar={true}
        />
        <Scene
          renderMenuButton={this.showMenuIcon}
          key="profile"
          component={Profile}
          hideNavBar={true}
        />

Меню.js 

        <Button
          title="Test button"
          buttonStyle={[styles.button, styles.blue_button]}
          onPress={() => this.props.renderMenuButton(true)}
          textStyle={{ fontSize: 14 }}
        />

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

PS: простите за мой английский ...

1 Ответ

0 голосов
/ 23 мая 2018

По умолчанию shouldComponentUpdate возвращает значение true.Это то, что вызывает «обновлять все время», которое мы видели выше.Тем не менее, вы можете перезаписать shouldComponentUpdate, чтобы дать ему больше «умов», если вам нужно повышение производительности.Вместо того, чтобы позволять React перерисовывать все время, вы можете указать React, когда не хотите запускать перерисовку.

Когда React приходит для рендеринга компонента, он будет работатьshouldComponentUpdate и посмотрите, вернет ли он значение true (компонент должен обновиться, то есть повторную визуализацию) или false (на этот раз React может пропустить повторную визуализацию).Поэтому вам нужно будет перезаписать shouldComponentUpdate, чтобы возвращать значение true или false, если необходимо указать React, когда выполнять повторную визуализацию, а когда пропустить.

пример: 

  shouldComponentUpdate(nextProps) {
        const differentTitle = this.props.title !== nextProps.title;
        const differentDone = this.props.done !== nextProps.done
        return differentTitle || differentDone;
    }
...