React Native - 一个视图中的多个倒数计时器无需重新渲染

Question

我正在构建一个应用程序，它在堆栈导航器中有一个屏幕，可以呈现多个 touchableOpacity，所有这些都具有一个独立且唯一的倒计时计时器（以秒为单位）。

每个 TouchableOpacity 通过减去唯一时间和当前时间的差来显示计数中的剩余秒数。 当前时间存储为状态变量，当组件挂载时，将调用下面的函数。

    initTime() {
        setInterval( () => {
            this.setState({
                currentTime : new Date()
            })
          },1000)
    }

我的问题主要是性能，视图需要每秒重新渲染，这导致旧设备确实难以应对不断的渲染。

有什么方法可以实现这一点而无需每秒重新渲染？

Answer 1

只需单独创建一个倒计时组件并将其导入任何地方。这个组件只更新自己，在父视图上没有任何问题。我在一个视图中检查了大约 100 个组件的这种方法，没有任何问题。