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

本教程旨在解决React函数式组件中因DOM操作时机不当导致的渲染问题。我们将深入探讨如何利用useState管理组件状态，通过useEffect在组件挂载后安全执行副作用操作（如日历渲染），并使用useCallback优化函数性能。此外，还将介绍条件渲染以确保DOM元素存在，并强调React中避免直接DOM操作的最佳实践。

1. 理解React组件生命周期与副作用

在react函数式组件中，直接在组件主体（函数顶层）调用会修改dom或依赖dom存在的函数，通常会导致不可预测的行为，例如在组件初次渲染时无法正常工作，或者在数据更新后出现问题。这是因为react组件的渲染过程是声明式的，它首先根据状态和属性构建虚拟dom，然后将虚拟dom与真实dom进行比较并更新。而像document.queryselector这样的命令式dom操作，如果其目标元素在组件渲染完成前尚未存在于真实dom中，则会失败。

原始代码中，renderCalendar()在组件函数体内被直接调用，此时组件的JSX尚未完全渲染到真实DOM中，导致currentDate和daysTag等通过document.querySelector获取的元素可能为空，从而使日历无法正确初始化。即使通过某种方式使其工作，刷新页面后问题依然存在，这进一步证实了时序问题。

为了解决这类问题，React提供了特定的钩子（Hooks）来管理副作用，确保代码在正确的时机执行。

2. 核心解决方案：useState与useEffect

要确保renderCalendar函数在DOM元素可用时才执行，并仅在必要时重新执行，我们需要结合使用useState、useEffect和useCallback。

2.1 管理渲染状态：useState

首先，引入一个状态变量来标记日历是否已经成功渲染。这对于后续的条件渲染和确保renderCalendar只在DOM准备好后执行至关重要。

import React, { useState, useEffect, useCallback } from 'react';
// ... 其他导入
export const Calendar = () => {
// ... 其他变量定义
// 添加一个状态来追踪日历是否已渲染
const [renderedCalendar, setRenderedCalendar] = useState(false);
// ... rest of the component
};

2.2 确保DOM就绪后执行：useEffect

useEffect是React中处理副作用的钩子。它会在组件渲染到DOM之后执行，是执行DOM操作、数据获取、订阅事件等副作用的理想场所。我们将renderCalendar的调用放入useEffect中，以确保它在组件的JSX内容（包括.current-date和.days元素）被渲染到DOM之后才尝试访问它们。

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

依赖数组的理解：

• renderCalendar函数的useCallback依赖数组[currYear, currMonth]意味着，只有当currYear或currMonth的值发生变化时，renderCalendar函数才会重新创建。这有助于优化性能。
• useEffect的依赖数组[renderCalendar]意味着，只有当renderCalendar函数本身发生变化时（即currYear或currMonth变化导致它重新创建），useEffect才会重新执行。这样确保了在日历月份或年份变化时，renderCalendar会被再次调用以更新显示。

2.3 处理事件监听器

原始代码中的事件监听器也存在类似的问题，它们在组件渲染时被直接添加，但prevNextIcon同样依赖于DOM元素的存在。更重要的是，在React中，通常不直接使用addEventListener。我们应该使用React的事件系统。

  // 移除原始的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(); // 每次月份改变时重新渲染日历
};

注意： currMonth和currYear在函数组件中应该作为状态来管理，而不是普通变量。否则，它们的改变不会触发组件重新渲染，导致renderCalendar虽然执行了，但JSX没有更新。

3. 优化与重构：React最佳实践

原始代码中直接操作DOM（document.querySelector, innerText, innerHTML）是React中应尽量避免的模式。React推崇声明式UI，即通过管理组件的状态来让React自动更新DOM。

3.1 使用React State管理日历数据

将currYear、currMonth以及日历中的天数数据存储在React的状态中。当这些状态改变时，React会自动重新渲染组件。

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

3.2 最终的优化与注意事项

• 避免document.querySelector： 除非与不受React控制的第三方DOM库交互，否则应避免直接使用document.querySelector来操作React组件内部的DOM。React通过状态和属性来管理UI更新。
• 使用useState管理可变数据： 任何会随时间变化并影响组件渲染的数据都应该存储在useState中。
• useEffect用于副作用： 当你需要执行与组件渲染无关的操作（如数据获取、订阅、手动DOM操作等）时，使用useEffect。确保正确设置依赖数组，以避免不必要的重复执行或遗漏执行。
• useCallback和useMemo优化性能： 当函数或计算结果作为useEffect的依赖项或传递给子组件时，使用useCallback和useMemo可以防止它们在每次渲染时都被重新创建，从而提高性能。
• 事件处理： 使用React的合成事件系统（如onClick）而不是addEventListener。

通过上述重构，我们不仅解决了日历初次渲染的问题，还将组件转换为了更符合React范式的声明式组件。这使得代码更易于理解、维护和扩展。