当前位置：首页 > 文章列表 > 文章 > 前端 > React日历组件渲染与副作用优化

React日历组件渲染与副作用优化

2025-08-03 19:45:34 0浏览收藏

本文针对React函数式组件中日历组件渲染时机与副作用处理问题，提供了一套完整的解决方案。**React日历组件渲染优化：解决DOM操作时机不当的难题**，文章深入剖析了React组件生命周期与副作用，强调了直接DOM操作的弊端，并详细阐述了如何利用`useState`管理组件状态，`useEffect`在组件挂载后安全执行副作用操作（如日历渲染），以及`useCallback`优化函数性能。此外，文章还介绍了条件渲染以确保DOM元素存在，并提倡使用React State管理日历数据，避免`document.querySelector`等直接DOM操作。通过本文，开发者能够掌握React日历组件的最佳实践，编写出更高效、可维护的代码。

React函数式组件中日历渲染的正确时机与副作用管理

本教程旨在解决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范式的声明式组件。这使得代码更易于理解、维护和扩展。

好了，本文到此结束，带大家了解了《React日历组件渲染与副作用优化》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！