React 函数组件中DOM操作与副作用管理：构建可靠日历组件的实践

import React, { useEffect, useState, useCallback } from 'react';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

export const Calendar = () => {
  // 使用useState管理当前显示的年份和月份
  const [currYear, setCurrYear] = useState(new Date().getFullYear());
  const [currMonth, setCurrMonth] = useState(new Date().getMonth());
  // 存储日历日期部分的HTML字符串，后续将通过dangerouslySetInnerHTML渲染
  const [calendarDaysHtml, setCalendarDaysHtml] = useState('');

  const months = ["January", "February", "March", "April",
                  "May", "June","July", "August", "September",
                  "October", "November", "December"];

  // ... 后续代码
};

// ... (之前的import和useState定义)

export const Calendar = () => {
  // ... (useState定义)

  // 使用useCallback包装renderCalendar，确保其引用在依赖项不变时保持稳定
  const renderCalendar = useCallback(() => {
    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay();
    let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate();
    let lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay();
    let lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();
    let liTag= "";

    for (let i = firstDayofMonth; i > 0; i--) {
      liTag += `<li class= "inactive">${lastDateofLastMonth - i + 1}</li>`;
    };

    for(let i = 1; i<= lastDateofMonth; i++) {
      let isToday = i === new Date().getDate() && currMonth === new Date().getMonth()
                    &&  currYear === new Date().getFullYear() ? "active" : "";
      liTag += `<li class="${isToday}">${i}</li>`;
    };

    for(let i = lastDayofMonth; i<= 5; i++) {
      liTag += `<li class= "inactive">${i - lastDayofMonth + 1}</li>`;
    };

    // 不再直接操作DOM，而是更新状态，让React来处理渲染
    setCalendarDaysHtml(liTag);
  }, [currYear, currMonth]); // 依赖项：当currYear或currMonth变化时，renderCalendar函数才会重新创建

  // ... 后续代码
};

// ... (之前的代码)

export const Calendar = () => {
  // ... (useState和renderCalendar定义)

  // 使用useEffect在组件挂载和currYear/currMonth变化时调用renderCalendar
  useEffect(() => {
    // 首次渲染和月份/年份变化时，执行日历渲染逻辑
    renderCalendar();
  }, [renderCalendar]); // 依赖项：当renderCalendar函数（因其内部依赖变化而重新创建时）变化时，此effect会重新运行

  // 处理箭头点击事件
  const handleArrowClick = useCallback((id) => {
    let newMonth = currMonth;
    let newYear = currYear;

    if (id === "prev") {
      newMonth--;
    } else {
      newMonth++;
    }

    // 处理月份越界，更新年份
    if(newMonth < 0 || newMonth > 11) {
      const newDate = new Date(newYear, newMonth);
      newYear = newDate.getFullYear();
      newMonth