防止FullCalendar（反应）在每次渲染时都重新获取事件和资源

Question

我为我的React站点配置了FullCalendar。一切工作正常，除了从服务器进行过于频繁的重新获取。在下面的示例（已简化）中，我从另一个组件更改了Redux状态，该组件在控制台中注销了“ hello”。每次发生时，我也会注销“获取资源”（在通常的环境中，这是一个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}
            />
}

Answer 1

根据cbr的评论：

如果将useCallback用于getResources，是否会重新渲染？ – cbr

在useCallback中包装函数可解决此问题。

FullCalendar具有大量参数，其中大多数是常量，但有些是函数。这些函数在React中的每个渲染中都被重新声明，这导致日历组件将它们视为新函数并重新初始化。我现在有以下代码：

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

/>

这里，calendarParams都是不变的参数，这些参数已外包出去以免使代码混乱，而函数已被“存储”（包装在useCallback中）。这样，它就保持不变，并且日历不会不必要地重新呈现。