React组件中DOM操作与生命周期的融合：日历组件的正确初始化与渲染策略

export const Calendar = () => {
  // ... 其他变量和函数定义
  const renderCalendar = () => { /* ... DOM 操作逻辑 ... */ };
  renderCalendar(); // <-- 第一次调用
  // ... return 语句
};

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

export const Calendar = () => {
  // ... 变量定义
  const currentDateRef = React.useRef(null); // 使用ref替代querySelector
  const daysTagRef = React.useRef(null);     // 使用ref替代querySelector

  // ... currYear, currMonth, months 定义

  const renderCalendar = useCallback(() => {
    // 确保ref已关联到DOM元素
    if (!currentDateRef.current || !daysTagRef.current) {
      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>`;
    }

    // 通过ref操作DOM
    currentDateRef.current.innerText = `${months[currMonth]} ${currYear}`;
    daysTagRef.current.innerHTML = liTag;
  }, [currYear, currMonth, months]); // 依赖项，当这些值变化时，renderCalendar会更新

  useEffect(() => {
    renderCalendar();
  }, [renderCalendar]); // 依赖项为renderCalendar，当renderCalendar函数本身变化时重新执行

  // ... return 语句
};

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

export const Calendar = () => {
  const currentDateRef = useRef(null);
  const daysTagRef = useRef(null);

  let [currYear, setCurrYear] = useState(new Date().getFullYear()); // 使用useState管理年份和月份
  let [currMonth, setCurrMonth] = useState(new Date().getMonth());

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

  // 假设我们需要一个状态来指示日历是否已渲染（尽管对于此特定场景可能不是必需的，因为useEffect确保了时机）
  const [renderedCalendar, setRenderedCalendar] = useState(false);

  const renderCalendar = useCallback(() => {
    if (!currentDateRef.current || !daysTagRef.current) {
      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>`;
    }

    currentDateRef.current.innerText = `${months[currMonth]} ${currYear}`;
    daysTagRef.current.innerHTML = liTag;

    setRenderedCalendar(true); // 标记日历已渲染
  }, [currYear, currMonth, months]);

  useEffect(() => {
    renderCalendar();
  }, [renderCalendar]);

  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();
    }
    setCurrYear(newYear);
    setCurrMonth(newMonth);
    // 当currYear或currMonth改变时，renderCalendar会重新执行（因为它是依赖项），从而更新日历
  }, [currYear, currMonth]);

  return (
    <div className="auth flexContainer">
      <h1>Calendar</h1>
      <div className="wrapper">
        <header>
          <p className="current-date" ref={currentDateRef}>May</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>
          {/* 只有在日历内容渲染完成后才显示days列表，虽然通常不这样用 */}
          {renderedCalendar && <ul className="days" ref={daysTagRef}></ul>}
          {!renderedCalendar && <ul className="days"></ul>} {/* 初始状态或渲染前显示空列表 */}
        </div>
      </div>
    </div>
  );
};