本文深入探讨了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 ();Calendar
{renderedCalendar ? ( // 只有在日历成功渲染后才显示内容) : ({/* 初始为空，由 renderCalendar 填充 */}
- Sunday
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
{/* 初始为空，由 renderCalendar 填充 */}
Loading Calendar...// 可以显示加载状态 )}
注意： 在上述示例中，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 { setDate(prevDate => { let newMonth = prevDate.getMonth(); let newYear = prevDate.getFullYear(); if (direction === "prev") { newMonth--; } else { newMonth++; } // 处理月份越界 if (newMonth 11) { newMonth = 0; newYear++; } return new Date(newYear, newMonth, 1); // 设置为新月份的第一天 }); }; return ( Calendar
{`${months[currMonth]} ${currYear}`}
handlePrevNextClick("prev")}/> handlePrevNextClick("next")}/> - Sunday
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
{calendarDays.map((dayData, index) => ( - {dayData.day}
))}
);};
上述代码展示了如何将命令式的renderCalendar逻辑转换为声明式的React组件。通过useState管理日期，useMemo计算日历数据，以及在JSX中直接渲染
元素，我们完全避免了document.querySelector和innerHTML，使得组件更符合React的范式，更易于理解和维护。
总结
在React中，正确处理组件的初始化渲染和副作用至关重要。useEffect是执行副作用的官方钩子，它确保了代码在DOM元素可用后执行。结合useState可以管理组件的状态，包括渲染进度或数据。对于涉及DOM操作的函数，推荐使用useCallback进行记忆化，以优化性能。
然而，更深层次的最佳实践是避免直接的DOM操作。React鼓励我们通过管理组件的状态来声明式地描述UI。将复杂的渲染逻辑分解为由状态驱动的数据计算，然后在JSX中利用map等方法动态渲染，是构建健壮、可维护React组件的关键。通过采纳这些原则，你的React应用将更加高效、可预测。
以上就是React组件初始化渲染与DOM操作的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509623.html
微信扫一扫 
支付宝扫一扫 
