Запретить FullCalendar (React) обновлять события и ресурсы при каждом рендеринге - PullRequest
Новая
       73

Запретить FullCalendar (React) обновлять события и ресурсы при каждом рендеринге

2 голосов
/ 27 мая 2020

У меня настроен FullCalendar для моего сайта React. Все работает нормально, за исключением слишком частой повторной загрузки с сервера. В приведенном ниже примере (который я упростил) я изменяю состояние Redux из другого компонента, который выводит «привет» в консоль. Каждый раз, когда это происходит, я также получаю выход из системы «получение ресурсов» (в обычной среде это вызов API). То же самое происходит с повторной выборкой событий, а также каждый раз, когда изменяется любая переменная состояния в компоненте. В идеале я хочу, чтобы FullCalendar извлекал события только при инициализации и обновлял их вручную или при навигации по фактическому календарю. Мне не нужно его обновлять каждый раз, когда что-то происходит на странице / компоненте. Это возможно? 

export default function CalendarPlanner(){
    const reduxState = useSelector(state => state.calPlanner);


    const getResources = () => {
        console.log('getting resources');
    };

    useEffect(() => {
        console.log('hello');
    }, [reduxState]);


    return (
            <FullCalendar plugins={[resourceTimelinePlugin, interaction, dayGridPlugin]}
                          resources={getResources}
            />
}

1 Ответ

0 голосов
/ 28 мая 2020

Согласно комментарию cbr:

Выполняется ли повторный рендеринг, если вы используете useCallback для getResources? - cbr

Обертывание функции в useCallback решает проблему.

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

<FullCalendar
    {...calendarParams}
    resources={getResources}

/>

Здесь CalendarParams - это все постоянные параметры, которые переданы на аутсорсинг, чтобы не загромождать код, в то время как функция «мемоизирована» (заключена в useCallback). Таким образом, он остается постоянным, и календарь не перерисовывается без надобности.

...