reactjs - 防止 FullCalendar (React) 在每次渲染时重新获取事件和资源

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 的评论:

Does it re-render if you use useCallback for getResources? – cbr

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

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

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

/>

这里，calendarParams 都是外包的常量参数，以免代码困惑，而函数是“记忆化”的(包装在 useCallback 中)。这样一来，它就会保持不变，并且不会在不必要的情况下重新呈现日历。