本教程深入探讨了 React 函数组件中日历渲染的常见问题，特别是避免直接 dom 操作（如 document.querySelector 和 innerHTML）。我们将详细阐述如何利用 React 的核心机制——状态管理 (useState) 和副作用钩子 (useEffect)——来构建一个完全由数据驱动的、高效且易于维护的日历组件，确保其在首次加载和用户交互时都能无缝且正确地更新视图。
引言：React 中的 DOM 操作原则
React 的核心理念是声明式 ui。这意味着开发者通过描述 UI 的“状态”来构建界面，而不是直接操作 DOM 元素。React 会根据状态的变化自动、高效地更新 DOM。这种模式极大地简化了 UI 开发，并提高了应用的可维护性。
然而，当我们在 React 组件中直接使用诸如 document.querySelector、innerHTML 或 addEventlistener 等原生 DOM API 时，就违背了 React 的声明式原则。这可能导致以下问题：
- 渲染不一致性： React 维护一个虚拟 DOM 来优化更新。直接操作真实 DOM 会绕过虚拟 DOM，导致 React 无法感知这些变化，进而引发视图与内部状态不一致的问题。
- 性能问题： React 有一套高效的协调（Reconciliation）算法来最小化 DOM 操作。直接操作 DOM 会破坏这种优化。
- 难以调试和维护： 逻辑分散在 React 的生命周期和原生 DOM 操作中，使得问题追踪变得复杂。
- 兼容性与可移植性差： 代码与特定 DOM 环境耦合，难以在不同平台（如 react native）复用。
原始问题中的日历组件正是因为混合了命令式 DOM 操作与 React 组件模式，才导致了初始化渲染的困扰和后续难以维护的局面。
原问题分析与常见误区
在原始代码中，renderCalendar() 函数内部使用了 document.querySelector 来获取 DOM 元素，并使用 innerText 和 innerHTML 直接修改它们。
export const Calendar = () => { const currentdate = document.querySelector(".current-date") || {}; // 问题点1 let daysTag = document.querySelector(".days") || {}; // 问题点2 // ... const renderCalendar = () => { // ... currentDate.innerText = `${months[currMonth]} ${currYear}`; // 问题点3 daysTag.innerHTML = liTag; // 问题点4 }; renderCalendar(); // 首次调用位置 // ... prevNextIcon.forEach ( icon => { icon.addEventListener("click", () => { // 问题点5 // ... renderCalendar(); }); }); // ... return ( // ... JSX 结构 ); }
分析原代码中 renderCalendar() 的调用问题：
-
在 return 语句前调用 renderCalendar()：
- 当 React 组件首次渲染时，其函数体从上到下执行。
- 在 return 语句执行并返回 JSX 结构之前，对应的真实 DOM 元素（如 .current-date 和 .days）尚未被创建并挂载到文档中。
- 因此，document.querySelector(“.current-date”) 和 document.querySelector(“.days”) 在此时会返回 NULL。尽管代码中使用了 || {} 来避免运行时错误，但 currentDate 和 daysTag 实际上是空对象，后续对它们的 innerText 或 innerHTML 赋值将无效。
- 这就是为什么首次加载时日历无法正确显示，而刷新后又可能暂时显示的原因（因为浏览器缓存或某种时序巧合）。
-
在 return 语句后调用 renderCalendar()：
- JavaScript 函数的执行流程决定，一旦遇到 return 语句，函数就会立即终止并返回结果。
- 任何在 return 语句之后的代码都将是“不可达代码”（Unreachable code），永远不会被执行。终端中收到的“Unreachable code”警告正是对此的提示。
React 最佳实践：状态驱动与声明式渲染
解决上述问题的核心在于拥抱 React 的状态驱动和声明式渲染范式。我们将通过 useState 和 useEffect 钩子来重构日历组件。
-
useState：管理组件状态
- 所有影响组件渲染的数据（如当前的年份、月份、日历中的日期列表、当前日期文本等）都应该存储在 useState 中。当这些状态改变时，React 会自动重新渲染组件。
-
useEffect：处理副作用
-
JSX：声明式渲染 UI
- 不再使用 innerHTML 或 innerText 直接操作 DOM。
- 而是通过 JSX 语法，将状态数据直接绑定到 UI 元素上。例如，日期列表可以通过映射一个日期数据数组来动态生成
- 元素。
重构日历组件
我们将逐步重构 Calendar 组件，使其完全符合 React 的开发范式。
步骤一：定义状态
首先，我们需要定义组件所需的各种状态：当前的年份、月份、日历显示的日期文本，以及日历中所有日期（包括上月、本月、下月）的列表。
import React, { useState, useEffect, useCallback } from 'react'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; export const Calendar = () => { // 初始化当前日期 const today = new Date(); const [currYear, setCurrYear] = useState(today.getFullYear()); const [currMonth, setCurrMonth] = useState(today.getMonth()); // 0-11 const [currentDateText, setCurrentDateText] = useState(""); // 用于显示 "May 2023" const [daysInMonth, setDaysInMonth] = useState([]); // 用于存储日历中的所有日期数据 const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; // ... (其他代码) };
步骤二：封装计算逻辑到 useEffect
将原 renderCalendar 的逻辑重写为一个计算函数，该函数不再直接操作 DOM，而是计算出日期数据并更新状态。然后，在 useEffect 中调用这个计算函数。
// 使用 useCallback 优化，避免每次渲染都重新创建函数 const generateCalendarDays = useCallback(() => { let firstDayofMonth = new Date(currYear, currMonth, 1).getDay(); // 获取当月第一天是星期几 (0-6) let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(); // 获取当月最后一天 let lastDayofLastMonth = new Date(currYear, currMonth, 0).getDate(); // 获取上月最后一天 let days = []; // 填充上月日期 for (let i = firstDayofMonth; i > 0; i--) { days.push({ date: lastDayofLastMonth - i + 1, type: 'inactive', key: `prev-${lastDayofLastMonth - i + 1}` // 添加唯一 key }); } // 填充当月日期 for (let i = 1; i <= lastDateofMonth; i++) { let isToday = i === today.getDate() && currMonth === today.getMonth() && currYear === today.getFullYear(); days.push({ date: i, type: isToday ? 'active' : '', key: `curr-${i}` }); } // 填充下月日期 (确保日历有 6 行，即 42 个格子) let totalDaysDisplayed = days.length; let remainingSlots = 42 - totalDaysDisplayed; // 假设日历固定显示 6 周 if (remainingSlots < 0) remainingSlots = 0; // 避免负数，虽然通常不会发生 for (let i = 1; i <= remainingSlots; i++) { days.push({ date: i, type: 'inactive', key: `next-${i}` }); } // 更新状态 setDaysInMonth(days); setCurrentDateText(`${months[currMonth]} ${currYear}`); }, [currYear, currMonth, today]); // 依赖项：当年份或月份变化时重新计算 // 使用 useEffect 在组件挂载或 currYear/currMonth 变化时执行日历生成 useEffect(() => { generateCalendarDays(); }, [generateCalendarDays]); // 依赖 generateCalendarDays 函数
步骤三：JSX 声明式渲染
现在，我们可以利用 currentDateText 和 daysInMonth 这两个状态来渲染 UI。
return ( <div className="auth flexContainer"> <h1>Calendar</h1> <div className="wrapper"> <header> <p className="current-date">{currentDateText}</p> {/* 直接绑定状态 */} <div className="icons"> <ArrowBackIosIcon id="prev" className="arrow" onClick={() => { setCurrMonth(prevMonth => { let newMonth = prevMonth - 1; if (newMonth < 0) { setCurrYear(prevYear => prevYear - 1); return 11; // 11代表12月 } return newMonth; }); }}/> <ArrowForwardIosIcon id="next" className="arrow" onClick={() => { setCurrMonth(prevMonth => { let newMonth = prevMonth + 1; if (newMonth > 11) { setCurrYear(prevYear => prevYear + 1); return 0; // 0代表1月 } return newMonth; }); }}/> </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"> {daysInMonth.map(day => ( <li key={day.key} className={day.type}>{day.date}</li> // 映射数组生成列表 ))} </ul> </div> </div> </div> );
完整的重构代码示例
import React, { useState, useEffect, useCallback } from 'react'; import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; export const Calendar = () => { // 获取当前日期，用于标记“今天” const today = new Date(); // 使用 useState 管理当前显示的年份和月份 const [currYear, setCurrYear] = useState(today.getFullYear()); const [currMonth, setCurrMonth] = useState(today.getMonth()); // 月份从0开始 (0-11) // 用于显示日历
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
