原创投稿
  1. 创想鸟首页
  2. 用户投稿

React组件中DOM操作与生命周期的融合：日历组件的正确初始化与渲染策略

程序猿 • • 用户投稿

react组件中dom操作与生命周期的融合：日历组件的正确初始化与渲染策略

在React函数组件中正确处理DOM操作和函数调用的时机问题，特别是针对日历组件的初始渲染挑战。通过利用React的useState、useEffect和useCallback等Hooks，文章详细阐述了如何确保外部DOM操作逻辑在组件挂载后执行，同时优化性能并避免常见的渲染错误，为构建稳定高效的React组件提供了实用指导。

理解问题根源：React组件中的DOM操作挑战

在React应用中，我们通常采用声明式的方式构建用户界面。这意味着我们通过管理组件的状态来描述UI应该呈现的样子，而不是直接操作DOM元素。然而，在某些情况下，尤其是在从传统JavaScript代码迁移或集成第三方库时，开发者可能会尝试在React组件内部直接使用document.querySelector、innerText或innerHTML等DOM API。

原有的日历组件代码中，renderCalendar()函数在组件函数体的顶层被调用：

export const Calendar = () => {  // ... 其他变量和函数定义  const renderCalendar = () => { /* ... DOM 操作逻辑 ... */ };  renderCalendar(); // <-- 第一次调用  // ... return 语句};

这种调用方式存在以下几个问题：

执行时机不确定： 在React组件的函数体顶层执行代码，意味着它会在每次组件渲染时运行。然而，当renderCalendar()尝试通过document.querySelector获取DOM元素（如.current-date或.days）时，这些元素可能尚未被React渲染到DOM中，导致querySelector返回null或空对象，从而引发后续的DOM操作失败。重复执行与性能问题： 每次组件重新渲染（例如，父组件状态改变、自身状态改变等），renderCalendar()都会被不必要地执行，即使日历内容没有变化，这会造成性能浪费。“Unreachable code”警告： 如果将renderCalendar()放在return语句之后，JavaScript引擎会将其视为不可达代码，因为函数在遇到return后会立即退出。

问题的核心在于，React组件的渲染是一个异步且受控的过程。直接的DOM操作与React的虚拟DOM机制和协调过程相冲突，导致初始化渲染失败或行为不稳定。

解决方案核心：利用React Hooks管理副作用与渲染时机

为了在React组件中正确地执行依赖于DOM存在的逻辑，并管理其生命周期，我们需要利用React提供的Hooks，特别是useEffect、useState和useCallback。

1. useEffect：确保函数在DOM准备就绪后执行

useEffect Hook允许你在函数组件中执行副作用操作，例如数据获取、订阅事件或直接DOM操作。它会在组件渲染到DOM后执行，因此是执行renderCalendar()这类DOM操作的理想位置。

import React, { useEffect, useState, useCallback } from 'react';// ... 其他导入export const Calendar = () => {  // ... 变量定义  const currentDateRef = React.useRef(null); // 使用ref替代querySelector  const daysTagRef = React.useRef(null);     // 使用ref替代querySelector  // ... currYear, currMonth, months 定义  const renderCalendar = useCallback(() => {    // 确保ref已关联到DOM元素    if (!currentDateRef.current || !daysTagRef.current) {      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 += `
  • ${lastDateofLastMonth - i + 1}
    • `;    }    for (let i = 1; i <= lastDateofMonth; i++) {      let isToday = i === new Date().getDate() && currMonth === new Date().getMonth()                    && currYear === new Date().getFullYear() ? "active" : "";      liTag += `
  • ${i}
    • `;    }    for (let i = lastDayofMonth; i <= 5; i++) {      liTag += `
  • ${i - lastDayofMonth + 1}
    • `;    }    // 通过ref操作DOM    currentDateRef.current.innerText = `${months[currMonth]} ${currYear}`;    daysTagRef.current.innerHTML = liTag;  }, [currYear, currMonth, months]); // 依赖项，当这些值变化时，renderCalendar会更新  useEffect(() => {    renderCalendar();  }, [renderCalendar]); // 依赖项为renderCalendar，当renderCalendar函数本身变化时重新执行  // ... return 语句};

    在上述代码中，我们将renderCalendar()的调用移入了useEffect。useEffect的第二个参数是依赖项数组，当数组中的任何值发生变化时，useEffect会重新运行。这里我们将其设置为[renderCalendar]，表示当renderCalendar函数本身发生变化时（通常是由于其内部依赖项currYear或currMonth变化导致useCallback重新创建了函数），useEffect会重新执行。

    2. useState：管理渲染状态与条件渲染

    为了确保日历内容在renderCalendar执行完毕后才显示，或者在更复杂场景下控制组件的渲染流程，可以使用useState来设置一个标志位。虽然对于本例中直接操作DOM的renderCalendar，useEffect的执行时机已经足够，但为了演示原答案中提到的renderedCalendar状态，我们可以这样整合：

    import React, { useEffect, useState, useCallback, useRef } from 'react';// ... 其他导入export const Calendar = () => {  const currentDateRef = useRef(null);  const daysTagRef = useRef(null);  let [currYear, setCurrYear] = useState(new Date().getFullYear()); // 使用useState管理年份和月份  let [currMonth, setCurrMonth] = useState(new Date().getMonth());  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];  // 假设我们需要一个状态来指示日历是否已渲染（尽管对于此特定场景可能不是必需的，因为useEffect确保了时机）  const [renderedCalendar, setRenderedCalendar] = useState(false);  const renderCalendar = useCallback(() => {    if (!currentDateRef.current || !daysTagRef.current) {      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 += `
  • ${lastDateofLastMonth - i + 1}
    • `;    }    for (let i = 1; i <= lastDateofMonth; i++) {      let isToday = i === new Date().getDate() && currMonth === new Date().getMonth()                    && currYear === new Date().getFullYear() ? "active" : "";      liTag += `
  • ${i}
    • `;    }    for (let i = lastDayofMonth; i <= 5; i++) {      liTag += `
  • ${i - lastDayofMonth + 1}
    • `;    }    currentDateRef.current.innerText = `${months[currMonth]} ${currYear}`;    daysTagRef.current.innerHTML = liTag;    setRenderedCalendar(true); // 标记日历已渲染  }, [currYear, currMonth, months]);  useEffect(() => {    renderCalendar();  }, [renderCalendar]);  const handleArrowClick = useCallback((id) => {    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();    }    setCurrYear(newYear);    setCurrMonth(newMonth);    // 当currYear或currMonth改变时，renderCalendar会重新执行（因为它是依赖项），从而更新日历  }, [currYear, currMonth]);  return (    
          
    Calendar
          
            
              
    May
              
                 handleArrowClick("prev")}/>             handleArrowClick("next")}/>          
            
            
              
                  
    • Sunday
      •             
    • Monday
      •             
    • Tuesday
      •             
    • Wednesday
      •             
    • Thursday
      •             
    • Friday
      •             
    • Saturday
      •           
              {/* 只有在日历内容渲染完成后才显示days列表，虽然通常不这样用 */}          {renderedCalendar && 
      }          {!renderedCalendar && 
        } {/* 初始状态或渲染前显示空列表 */}        
              
            
          );};

        在这个例子中，renderedCalendar状态被用于一个简单的条件渲染。当renderCalendar执行完毕后，setRenderedCalendar(true)会被调用，从而触发组件重新渲染，并显示ul className=”days”元素。然而，更推荐的做法是直接让React管理ul的内容，而不是通过innerHTML。

        3. useCallback：优化函数性能与依赖管理

        useCallback Hook用于记忆化（memoize）一个函数。当一个函数被作为useEffect的依赖项时，或者作为子组件的props传递时，如果该函数在每次渲染时都被重新创建，可能会导致不必要的useEffect执行或子组件的重新渲染。useCallback可以确保在依赖项没有变化的情况下，函数实例保持不变。

        在上面的示例中，renderCalendar和handleArrowClick都使用了useCallback。这可以防止它们在每次父组件渲染时被重新创建，从而优化性能，并确保useEffect的依赖项[renderCalendar]能够正确地工作。

        注意事项与最佳实践

        尽管上述解决方案可以解决renderCalendar函数的调用时机问题，但它仍然保留了直接操作DOM的模式。在React中，更推荐的做法是完全利用React的状态管理和声明式渲染。

        避免直接DOM操作：

        根本问题： renderCalendar函数通过innerText和innerHTML直接修改DOM。这与React的虚拟DOM机制相悖，可能导致状态不同步、性能问题以及调试困难。推荐做法： 将日历的日期数据（例如liTag的内容）存储在React的状态中。当currYear或currMonth变化时，通过useState更新这些数据，然后让React负责根据新的状态重新渲染JSX。

        使用useState管理日历数据：

        将liTag的内容计算为字符串数组或JSX元素数组，并将其存储在一个状态变量中。将currentDate的文本也存储在状态中。在JSX中直接渲染这些状态变量。

        // 示例：更React化的renderCalendar逻辑const [daysHtml, setDaysHtml] = useState('');const [currentDateText, setCurrentDateText] = useState('');useEffect(() => {    let firstDayofMonth = new Date(currYear, currMonth, 1).getDay();    let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate();    let lastDayofLastMonth = new Date(currYear, currMonth, 0).getDate();    let liTags = [];    // 生成上个月的日期    for (let i = firstDayofMonth; i > 0; i--) {        liTags.push(
      • {lastDateofLastMonth - i + 1}
        • );    }    // 生成当月日期    for (let i = 1; i <= lastDateofMonth; i++) {        let isToday = i === new Date().getDate() && currMonth === new Date().getMonth()                    && currYear === new Date().getFullYear() ? "active" : "";        liTags.push(
      • {i}
        • );    }    // 生成下个月的日期    for (let i = (lastDayofMonth + firstDayofMonth) % 7; i < 7; i++) { // 确保填充到完整一周        liTags.push(
      • {i - ((lastDayofMonth + firstDayofMonth) % 7) + 1}
        • );    }    setDaysHtml(liTags);    setCurrentDateText(`${months[currMonth]} ${currYear}`);}, [currYear, currMonth, months]); // 依赖项为currYear, currMonth, monthsreturn (    // ...    
        {currentDateText}
            // ...    
          {daysHtml}
            // ...);

        使用useRef（仅在必要时）：

        如果确实需要与第三方库集成或执行一些React无法直接处理的DOM操作，useRef是获取DOM元素引用的正确方式。但应尽量避免。

        组件化思维：

        将日历的不同部分（如头部、日期网格）拆分为独立的、可复用的React组件，提高代码的可读性和可维护性。

        通过遵循这些最佳实践，可以构建出更符合React理念、性能更优、更易于维护的日历组件。理解useEffect、useState和useCallback在React生命周期中的作用，是掌握React函数组件开发的关键。

        以上就是React组件中DOM操作与生命周期的融合：日历组件的正确初始化与渲染策略的详细内容，更多请关注创想鸟其它相关文章！

        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
        如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
        发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1509699.html

        赞 (0)
        打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
        0 0

        关于作者

        程序猿的头像

        程序猿签约作者

        413.8K 文章
        0 评论
        2 粉丝
        这个人很懒，什么都没有留下～
        优化Odoo列表视图：持久化禁用特定复选框
        上一篇 2025年12月20日 05:34:45
        React函数式组件中日历渲染的正确时机与副作用管理
        下一篇 2025年12月20日 05:34:58

        相关推荐

        发表回复

        登录后才能评论
        关注微信