当前位置：首页 > 文章列表 > 文章 > 前端 > React组件初始化与DOM操作技巧

React组件初始化与DOM操作技巧

2025-07-24 08:45:31 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《React组件初始化与DOM操作技巧》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

React组件初始化渲染与DOM操作的最佳实践

本文深入探讨了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中直接渲染

元素，我们完全避免了document.querySelector和innerHTML，使得组件更符合React的范式，更易于理解和维护。