Question

我使用 react-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}
        />

Menu.js

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

不仅状态发生变化，而且还会再次呈现当前屏幕。怎么解决？

PS：对不起我的英语......

Answer 1

默认情况下， shouldComponentUpdate 返回true。这就是导致我们在上面看到的“一直更新所有内容”的原因。但是，如果需要提高性能，可以覆盖shouldComponentUpdate以使其更具“智能”。您不必一直让React 重新渲染，而是在您不想触发重新渲染时告诉React。

当React来渲染组件时，它将运行shouldComponentUpdate并查看它是否返回true（组件应该更新，a.k.a。重新渲染）或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;
    }

更改状态后重新呈现当前屏幕

1 个答案: