React Native - несколько таймеров обратного отсчета в одном представлении без повторного рендеринга

Question

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

Каждая TouchableOpacity отображает оставшиеся секунды в счетчике, вычитая разницу уникального времени и текущего времени. Текущее время сохраняется как переменная состояния, и когда компонент монтируется, вызывается следующая функция:

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

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

Есть ли способ, которым я могу добиться этого без необходимости повторного рендеринга каждую секунду?

Answer 1

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