本教程旨在解决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范式的声明式组件。这使得代码更易于理解、维护和扩展。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
