React组件初始化渲染与DOM操作的最佳实践

useEffect(() => {
  // 副作用代码
  // 例如：数据获取、订阅事件、DOM操作等

  return () => {
    // 清理函数（可选）
    // 在组件卸载或依赖项变化前执行，用于清理副作用
  };
}, [dependencies]); // 依赖项数组

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

export const Calendar = () => {
  // ...原有的状态和变量

  const [renderedCalendar, setRenderedCalendar] = useState(false); // 新增状态

  // ... renderCalendar 函数定义
};

// ...组件内部

  const renderCalendar = useCallback(() => { // 使用 useCallback 优化
    // ... renderCalendar 内部逻辑（保持不变，但请注意后续的最佳实践建议）

    // 获取DOM元素，此时应该已经挂载
    const currentDateElement = document.querySelector(".current-date");
    const daysTagElement = document.querySelector(".days");

    if (currentDateElement && daysTagElement) {
      currentDateElement.innerText = `${months[currMonth]} ${currYear}`;
      daysTagElement.innerHTML = liTag;
      setRenderedCalendar(true); // 渲染成功后更新状态
    } else {
      console.warn("Calendar DOM elements not found for rendering.");
    }
  }, [currYear, currMonth, months]); // 依赖项，当这些变化时 renderCalendar 会更新

  useEffect(() => {
    // 确保在组件挂载后执行 renderCalendar
    renderCalendar();
  }, [renderCalendar]); // 将 renderCalendar 作为依赖项

// ...组件内部

  return (
    <div className="auth flexContainer">
      <h1>Calendar</h1>
      {renderedCalendar ? ( // 只有在日历成功渲染后才显示内容
        <div className="wrapper">
          <header>
            <p className="current-date"></p> {/* 初始为空，由 renderCalendar 填充 */}
            <div className="icons">
              <ArrowBackIosIcon id="prev" className="arrow"/>
              <ArrowForwardIosIcon id="next" className="arrow"/>
            </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"></ul> {/* 初始为空，由 renderCalendar 填充 */}
          </div>
        </div>
      ) : (
        <div>Loading Calendar...</div> // 可以显示加载状态
      )}
    </div>
  );

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

export const Calendar = () => {
  const [date, setDate] = useState(new Date());
  const currYear = date.getFullYear();
  const currMonth = date.getMonth();

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

  // 使用 useMemo 计算日历数据，当 currYear 或 currMonth 变化时重新计算
  const calendarDays = useMemo(() => {
    let days = [];
    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--) {
      days.push({ day: lastDateofLastMonth - i + 1, type: 'inactive' });
    }

    // 填充当前月的日期
    for (let i = 1; i <= lastDateofMonth; i++) {
      let isToday = i === new Date().getDate() && currMonth === new Date().getMonth() && currYear === new Date().getFullYear();
      days.push({ day: i, type: isToday ? 'active' : '' });
    }

    // 填充下个月的日期
    let lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay();
    for (let i = lastDayofMonth; i < 6; i++) { // 确保是6，因为一周是7天，索引0-6
      days.push({ day: i - lastDayofMonth + 1, type: 'inactive' });
    }
    return days;
  }, [currYear, currMonth]);

  const handlePrevNextClick = (direction) => {
    setDate(prevDate => {
      let newMonth = prevDate.getMonth();
      let newYear = prevDate.getFullYear();

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

      // 处理月份越界
      if (newMonth < 0) {
        newMonth = 11;
        newYear--;
      } else if (newMonth > 11) {
        newMonth = 0;
        newYear++;
      }
      return new Date(newYear, newMonth, 1); // 设置为新月份的第一天
    });
  };

  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={() => handlePrevNextClick("prev")}/>
            <ArrowForwardIosIcon id="next" className="arrow" onClick={() => handlePrevNextClick("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((dayData, index) => (
              <li key={index} className={dayData.type}>{dayData.day}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};