Question

如何在状态更改时停止特定视图的重新渲染？我正在使用react-native-timer-countdown中的计时器倒数组件。到期后会发生什么，我正在设置新状态。因此，当有新状态时，它会重新显示。因此计时器从头开始。

库本身建议使用两个单独的组件。但是，我觉得那不是很好。有没有什么方法可以停止计时器（一旦完成状态更改）就重新启动？

我的代码：

<View>
    <TimerCountdown
      initialMilliseconds={100 * 60}
      onTick={(milliseconds) => console.log("tick", milliseconds)}
      onExpire={() => this.setState({ disabled: false })}
    />
</View>

OnExpire，有一个setstate可以重新启动计时器。请建议

Answer 1

不确定您要达到的目标。我认为您可以选择以下几种方式：

使用两个组件（我认为这是一个好主意）
让他们将PureComponent用于TimerCountdown（或实施shouldComponentUpdate）
自己编写倒计时（我想您完全自己编写时会找到一种制作方法）

Answer 2

我也有这个包裹的问题。

我通过删除它并编写自己的组件来解决它。

参考我的这个答案，我解释了我的工作。

timer count down re-rendering and leaking problem

对我来说很好，我希望它也能帮助您并解决您的问题。

Answer 3

React Native的一个好习惯是有一个父组件，有时称为 Smart Component ，通常是基于类的组件，

这是工作 -获取数据并做出任何合理的决定。 -相应地渲染子组件。

这些子组件被人们称为哑组件，通常是表示组件或功能组件，它的工作是从名称上渲染一些内容，仅对收到的道具进行更改

因此，我建议您将不希望受到状态更改影响的JSX封装在功能组件中。这样一来，如果状态变化没有作为支撑传递给它，它将不会被呈现。

在下面的代码中，如果state中的field2已更改，PresentationalComponent将不会重新显示

class ParentComponent {
  render() {
    const { field1, field2 } = this.state;
    return (
      <View>
        ...
        <PresentationalComponent prop1={field1} />
        ...
      </View>
    );
  }
}

停止在React Native中重新渲染特定视图

3 个答案: