React Big Calendar如何实现事件更新而不触发重渲染的最佳策略？

本文共计1228个文字，预计阅读时间需要5分钟。

原文：

React Big Calendar 是一个功能强大但对状态更新敏感的组件——它不会自动监听嵌套对象或派生数组的深层变化。在你的代码中，events 是由 holidayEvents 和 tasks 拼接而成的计算属性（const events = [...holidayEvents, ...tasks]），而 tasks 又依赖 props.data 经 map 转换生成。问题核心在于：tasks 状态虽被 setTasks 更新，但 events 并非 React state，而是每次渲染时重新计算的普通变量；Calendar 组件仅通过 events prop 接收数据，若该 prop 引用未变（如因浅比较失效或闭包旧值），则不会触发重渲染。

更关键的是，你当前使用了两个独立的 useState（holidays 和 tasks），却未建立它们与最终 events 数组之间的响应式联动。例如：

• useEffect(() => { setTasks(newTasks) }, []) 中的空依赖数组导致 tasks 仅在挂载时初始化，后续 props.data 变化不会触发更新；
• addMockTask 中调用 setTasks([...tasks, taskToEvent(dummyTask)]) 确实更新了 tasks，但 holidayEvents 是在渲染函数内即时生成的（非 state），其内容依赖 holidays state —— 而 holidays 的 useEffect 是异步获取的，存在竞态风险；
• taskToEvent 函数定义在组件内部，每次渲染都会重建，不仅影响性能，还可能干扰 memoization。