本教程旨在解决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 += `依赖数组的理解：
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 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 { let newMonth = id === "prev" ? currMonth - 1 : currMonth + 1; let newYear = currYear; if(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 ( Calendar
{months[currMonth]} {currYear}
handleArrowClick("prev")}/> handleArrowClick("next")}/> - Sunday
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
{calendarDays.map((day, index) => ( - {day.date}
))}
);}
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范式的声明式组件。这使得代码更易于理解、维护和扩展。
以上就是React函数式组件中日历渲染的正确时机与副作用管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509701.html
微信扫一扫 
支付宝扫一扫 
