React函数式组件中日历渲染的正确时机与副作用管理

import React, { useState, useEffect, useCallback } from 'react';
// ... 其他导入

export const Calendar = () => {
  // ... 其他变量定义

  // 添加一个状态来追踪日历是否已渲染
  const [renderedCalendar, setRenderedCalendar] = useState(false);

  // ... rest of the component
};

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

export const Calendar = () => {
  // 注意：此处获取DOM元素的代码应移动到renderCalendar内部，
  // 并且在React中通常推荐使用ref或通过状态管理数据来避免直接DOM操作。
  // 但为了解决原问题，暂时保留其位置，但在renderCalendar内部确保获取成功。
  let date = new Date();
  let currYear = date.getFullYear();
  let currMonth = date.getMonth();

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

  const [renderedCalendar, setRenderedCalendar] = useState(false);

  // 使用useCallback包装renderCalendar以优化性能，防止不必要的重新创建
  const renderCalendar = useCallback(() => {
    // 确保在函数执行时获取到DOM元素
    const currentDateElement = document.querySelector(".current-date");
    const daysTagElement = document.querySelector(".days");

    if (!currentDateElement || !daysTagElement) {
      // 如果元素尚未就绪，则不执行渲染逻辑，或者可以抛出错误/记录警告
      console.warn("Calendar elements not found in DOM yet.");
      return;
    }

    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>`;
    };

    currentDateElement.innerText = `${months[currMonth]} ${currYear}`;
    daysTagElement.innerHTML = liTag;

    // 日历渲染完成后，更新状态
    setRenderedCalendar(true);
  }, [currYear, currMonth]); // 依赖项：当currYear或currMonth变化时，renderCalendar函数才需要重新创建

  // 使用useEffect在组件挂载后调用renderCalendar
  useEffect(() => {
    renderCalendar();
  }, [renderCalendar]); // 依赖项：当renderCalendar函数本身变化时，重新执行

  // ... rest of the component
};

  // 移除原始的forEach和addEventListener
  // prevNextIcon.forEach ( icon => { ... });

  const handleArrowClick = (id) => {
    currMonth = id === "prev" ? currMonth - 1 : currMonth + 1;

    if(currMonth < 0 || currMonth > 11) {
      date = new Date(currYear, currMonth);
      currYear = date.getFullYear();
      currMonth = date.getMonth();
    }
    else {
      date = new Date(); // 这行可能需要根据实际需求调整，通常是保持当前日期或重置为新月份的第一天
    };
    renderCalendar(); // 每次月份改变时重新渲染日历
  };

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

export const Calendar = () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [currYear, setCurrYear] = useState(currentDate.getFullYear());
  const [currMonth, setCurrMonth] = useState(currentDate.getMonth());

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

  // 使用useMemo来计算日历天数，只有在currYear或currMonth变化时才重新计算
  const calendarDays = useMemo(() => {
    let liTag = [];
    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay();
    let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate();
    let lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate();

    // 上个月的日期
    for (let i = firstDayofMonth; i > 0; i--) {
      liTag.push({
        date: lastDateofLastMonth - i + 1,
        className: "inactive"
      });
    };

    // 当前月的日期
    for(let i = 1; i<= lastDateofMonth; i++) {
      let isToday = i === new Date().getDate() && currMonth === new Date().getMonth()
                    &&  currYear === new Date().getFullYear() ? "active" : "";
      liTag.push({
        date: i,
        className: isToday
      });
    };

    // 下个月的日期
    for(let i = lastDayofMonth; i<= 5; i++) {
      liTag.push({
        date: i - lastDayofMonth + 1,
        className: "inactive"
      });
    };
    return liTag;
  }, [currYear, currMonth]);

  const handleArrowClick = useCallback((id) => {
    let newMonth = id === "prev" ? currMonth - 1 : currMonth + 1;
    let newYear = currYear;

    if(newMonth < 0 || newMonth > 11) {
      const newDate = new Date(currYear, newMonth);
      newYear = newDate.getFullYear();
      newMonth = newDate.getMonth();
    }
    setCurrMonth(newMonth);
    setCurrYear(newYear);
  }, [currMonth, currYear]);

  // 注意：现在renderCalendar函数不再需要，因为我们直接在JSX中渲染calendarDays
  // useEffect(() => {
  //   // 可以在这里执行一些依赖于DOM但与日历内容无关的副作用，例如初始化第三方库
  // }, []);

  return (
    <div className="auth flexContainer">
      <h1>Calendar</h1>
      <div className="wrapper">
        <header>
          <p className="current-date">{months[currMonth]} {currYear}</p>
          <div className="icons">
            <ArrowBackIosIcon id="prev" className="arrow" onClick={() => handleArrowClick("prev")}/>
            <ArrowForwardIosIcon id="next" className="arrow" onClick={() => handleArrowClick("next")}/>
          </div>
        </header>
        <div className="calendar">
          <ul className="weeks">
            <li>Sunday</li>
            <li>Monday</li>
            <li>Tuesday</li>
            <li>Wednesday</li>
            <li>Thursday</li>
            <li>Friday</li>
            <li>Saturday</li>
          </ul>
          <ul className="days">
            {calendarDays.map((day, index) => (
              <li key={index} className={day.className}>{day.date}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}