Как эффективно отображать различные виды в FlatList

Я создаю компонент календаря, который содержит 2 представления с FlatList. Каждое представление связано с отдельным источником данных. В частности, в представлении 1 будут отображаться все дни месяца, а в представлении 2 - все дни недели.

Ссылка на демонстрацию видео, кнопка года предназначена для переключения просмотра

Для простоты просмотр каждого месяца / недели представлен датой в виде элемента массива в большем массиве.

Например, каждый элемент в массиве month - это уникальные данные за месяц. В массиве размером 12 будет 12 уникальных дат каждого месяца. Затем каждый объект Date() будет передан моим дочерним компонентам для правильного рендеринга. Результатом этого конкретного массива month является список полного календаря на 12 месяцев.

Примечание. Для повышения производительности мой дочерний компонент будет отображать только current month -1, current month и current month +1, все остальные месяцы будут отображаться условно, как только пользователь прокрутит страницу.

[
    ...
    Wed May 30 2018 21:51:47 GMT+0800 (+08),
    Sat Jun 30 2018 21:51:47 GMT+0800 (+08),
    Mon Jul 30 2018 21:51:47 GMT+0800 (+08),
    ...
]

То же самое относится к просмотру 2, который является недельным. За исключением того, что мои данные теперь содержат уникальные дни недели для всех недель месяца.

Прежде чем реализовать этот подход, я попытался что-то взломать в своем дочернем компоненте. Например, когда пользователи нажимают кнопку для переключения представления, он передает опору с текущим объектом Date(), чтобы уведомить дочерние элементы об условном рендеринге другого представления. Это в основном переключение между View и FlatList. Вложенный FlatList был плохой идеей, поскольку оба списка прокручиваются в одном направлении.

Не говоря уже о том, что мой компонент календаря предполагает переход к выбранному месяцу. Другое решение, которое я реализовал, - использовать только массив month для обоих представлений, взломав индексы из keyExtractor. Например, я бы переиндексировал список, как только пользователь jumps от одного месяца к другому, но вскоре я понял, что это антипаттерн, который вызывает только больше проблем.

Note: I have implemented shouldComponentUpdate in all my children components. So scrolling in just 1 View should not be a problem, size of the data source will not affect at all because only the changes happen to the -1, 0, and +1 month will be reflected. The bottleneck of my component is only happening when switching views.

Утерянный рассказ, теперь я прибег к текущему решению, где у меня есть 2 разных источника данных (array) для 2 разных представлений в FlatList. У меня есть кнопка для переключения между режимами. Проблема в том, что для переключения режима (настройки состояний) требуется некоторое время, так как каждый раз, когда он повторно создает экземпляр представления, вызывая эту опору onViewableItemsChanged из FlatList, что требует некоторых сложных вычислений. Есть ли лучший подход?

Код (родительский)

renderCalendarList = () => {
        return (
            <FlatList
                pageSize = {1}
                horizontal = {true}
                pagingEnabled = {true}
                scrollEnabled = {true}
                keyExtractor = {this.keyExtractor}
                ref = {(c) => this.calendarList = c}
                getItemLayout = {this.getItemLayout}
                renderItem = {this.renderCalendarComponent}
                onViewableItemsChanged = {this.onViewableItemsChanged}
                data = {(this.state.weekMode ? this.state.weekRows : this.state.rows)} />
        )
    }

switchView = () => {
        this.setState({ weekMode: !this.state.weekMode });

        // next week is going to be month view
        if (this.state.weekMode) {
            const mYClone = this.state.monthYears.slice(0);
            const selectedDay = DateUtils.formatDateInMY(this.props.selectedDay);

            for (let i = 0; i < mYClone.length; i++) {
                if (selectedDay === mYClone[i]) {
                    this.setState({ currentMonth: this.props.selectedDay })
                    this.calendarList.scrollToIndex({ animated: false, index: i });
                }
            }
        } else {             // next week is going to be week view
            const rowClone = this.state.weekRows.slice(0);

            for (let i = 0; i < rowClone.length; i++) {
                if (isSameWeek(rowClone[i], this.props.selectedDay)) {
                    this.setState({ currentMonth: rowClone[i] });
                    this.calendarList.scrollToIndex({ animated: false, index: i });
                }
            }
        }
    }

Код (Дети)

render() {
        const { container, monthContainer, weekContainer } = styles;
        const { currentMonth, firstDay, style, weekMode } = this.props;
        if (!weekMode) {
            const days = DateUtils.populateMonth(currentMonth, firstDay);
            const weeks = [];
            while (days.length) {
                weeks.push(this.renderWeek(days.splice(0, 7), weeks.length));
            }
            return (
                <View style = {[container, style]}>
                    <View style = {[monthContainer]}>{weeks}</View>
                </View>
            )
        } else {
            const startDay = subDays(currentMonth, 3); // focus on middle
            const endDay = addDays(startDay, 6)
            const days = eachDay(startDay, endDay, 1);
            const daysToRender = [];
            days.forEach((day, dayID) => {
                daysToRender.push(this.renderDay(day, dayID))
            });
            return (
                <View style = {style}>
                    <View style = {[weekContainer]}>
                        {daysToRender}
                    </View>
                </View>
            )
        }
    }

Ссылка на демонстрацию видео, кнопка года предназначена для переключения просмотра