本文深入探讨了React函数组件中初始化渲染、副作用管理及dom操作的正确姿势。针对在React中直接使用document.querySelector进行DOM操作导致的问题，文章详细介绍了如何利用useEffect、useState和useCallback等React Hooks来管理组件生命周期和状态，确保函数在DOM元素可用后正确执行，并引导读者避免非React范式的DOM操作，转向更声明式的ui构建方法。
1. React组件渲染的挑战与常见误区
在react函数组件中，我们经常需要执行一些与dom交互或数据获取相关的逻辑。一个常见的误区是将这些逻辑直接放在组件函数体内部，或者在组件返回jsx之前调用。这可能导致以下问题：
- DOM元素未就绪： 当组件函数首次执行时，其JSX描述的DOM元素可能尚未被React渲染到实际DOM中。此时如果尝试使用document.querySelector等方法去获取这些元素，将得到NULL或空对象，导致后续操作失败。
- “不可达代码”警告： 如果将函数调用放在return语句之前，并且该函数本身没有副作用（例如只计算值），React可能会将其视为“不可达代码”，因为其结果未被用于渲染或状态更新。
- 不一致的渲染： 直接在函数体中调用可能导致在组件重新渲染时重复执行，或者在某些情况下未按预期执行，造成UI显示异常。
- 违反React声明式范式： React推崇声明式UI，即通过状态（State）的变化来驱动UI的更新，而不是直接操作DOM。频繁使用document.querySelector和innerHTML等命令式API会破坏React的抽象层，使组件难以维护和理解。
在提供的日历组件示例中，renderCalendar()函数在组件的return语句之前被调用，并且该函数内部使用了document.querySelector来获取DOM元素并修改innerHTML。这种做法正是上述问题的典型体现。当组件首次渲染时，current-date和days这些DOM元素可能还未挂载到页面上，导致querySelector失败，从而日历无法正确显示。
2. 理解React的副作用与生命周期：useEffect
React组件的渲染过程是声明式的：你告诉React UI应该是什么样子，React负责将其高效地渲染到DOM上。然而，有些操作（如数据获取、订阅事件、手动修改DOM等）被称为“副作用”（Side Effects），它们不直接参与UI的渲染，但对组件的运行至关重要。
在React函数组件中，处理副作用的正确方式是使用useEffect Hook。useEffect允许你在组件渲染到DOM之后执行副作用清理或设置逻辑。它的基本语法是：
useEffect(() => { // 副作用代码 // 例如：数据获取、订阅事件、DOM操作等 return () => { // 清理函数（可选） // 在组件卸载或依赖项变化前执行，用于清理副作用 }; }, [dependencies]); // 依赖项数组
当依赖项数组为空（[]）时，useEffect中的副作用函数只会在组件首次挂载后执行一次，类似于类组件的componentDidMount。当依赖项数组包含变量时，副作用函数会在这些变量变化时重新执行。
将renderCalendar这样的DOM操作函数放入useEffect中是关键，因为它确保了：
- renderCalendar只在组件的DOM元素已经挂载到页面上之后才执行。
- renderCalendar的执行时机受React生命周期管理，避免不必要的重复执行。
3. 使用useEffect和useState管理初始化渲染
为了解决日历组件的问题，我们可以结合useState和useEffect来确保renderCalendar在正确的时机执行，并且DOM元素已经可用。
步骤一：引入useState来跟踪渲染状态
我们可以创建一个状态变量来指示日历是否已经成功渲染。
import React, { useState, useEffect, useCallback } from 'react'; // ...其他导入 export const Calendar = () => { // ...原有的状态和变量 const [renderedCalendar, setRenderedCalendar] = useState(false); // 新增状态 // ... renderCalendar 函数定义 };
步骤二：将renderCalendar放入useEffect
将renderCalendar()的调用移入useEffect，并确保在renderCalendar执行完毕后更新renderedCalendar状态。
// ...组件内部 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 作为依赖项
关于useCallback：renderCalendar函数本身依赖于currYear、currMonth和months等外部变量。如果这些变量发生变化，renderCalendar函数会重新创建。当renderCalendar作为useEffect的依赖项时，每次函数重新创建都会导致useEffect重新执行。使用useCallback可以记忆renderCalendar函数，只有当其依赖项（currYear, currMonth, months）发生变化时才重新创建，从而避免useEffect不必要的重复执行，优化性能。
4. 确保DOM元素可用：条件渲染
虽然useEffect确保了renderCalendar在DOM挂载后执行，但如果document.querySelector仍然找不到元素，那说明JSX渲染的DOM结构可能在renderCalendar执行时还没完全可用，或者存在其他问题。一种更健壮的方法是使用renderedCalendar状态进行条件渲染，确保只有在日历逻辑成功执行后才显示日历内容。
// ...组件内部 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> );
注意： 在上述示例中，current-date和days的innerText和innerHTML最初是空的，因为它们将由renderCalendar函数填充。
5. 更佳实践：拥抱React的声明式UI
尽管上述解决方案能让日历正常工作，但它仍然保留了在React组件中使用document.querySelector和直接修改innerHTML的“命令式”代码。这在React中通常被认为是反模式。React的核心思想是通过管理组件的状态来声明式地描述UI，让React负责高效地更新DOM。
推荐的React化改造方向：
-
避免document.querySelector：
- 在React中，你几乎不需要直接使用document.querySelector。如果你需要直接访问DOM节点（例如，为了集成第三方库或进行测量），请使用useRef Hook。
- 然而，对于像日历这样完全由数据驱动的UI，通常不需要直接DOM操作。
-
将逻辑React化：通过状态驱动UI
- 将currYear、currMonth、months、以及日历中每个日期的liTag内容等都作为组件的状态来管理。
- renderCalendar函数应该被拆解，其逻辑变为根据当前状态（currYear, currMonth）计算出要渲染的日期数据数组。
- 然后，在JSX中通过map方法遍历这个日期数据数组，动态生成
- 元素，并根据数据设置其className和innerText。
示例（概念性，非完整实现）：
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> ); };
上述代码展示了如何将命令式的renderCalendar逻辑转换为声明式的React组件。通过useState管理日期，useMemo计算日历数据，以及在JSX中直接渲染
总结
在React中，正确处理组件的初始化渲染和副作用至关重要。useEffect是执行副作用的官方钩子，它确保了代码在DOM元素可用后执行。结合useState可以管理组件的状态，包括渲染进度或数据。对于涉及DOM操作的函数，推荐使用useCallback进行记忆化，以优化性能。
然而，更深层次的最佳实践是避免直接的DOM操作。React鼓励我们通过管理组件的状态来声明式地描述UI。将复杂的渲染逻辑分解为由状态驱动的数据计算，然后在JSX中利用map等方法动态渲染，是构建健壮、可维护React组件的关键。通过采纳这些原则，你的React应用将更加高效、可预测。
