react重新渲染子组件 react重新渲染会调用哪些生命周期

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

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

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

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

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

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

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 += `<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>`;    }    // 通过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会重新执行。

为了确保日历内容在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 += `<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>`;    }    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 < 0 || newMonth > 11) {      const newDate = new Date(currYear, newMonth);      newYear = newDate.getFullYear();      newMonth = newDate.getMonth();    }    setCurrYear(newYear);    setCurrMonth(newMonth);    // 当currYear或currMonth改变时，renderCalendar会重新执行（因为它是依赖项），从而更新日历  }, [currYear, currMonth]);  return (    <div className="auth flexContainer">      <h1>Calendar</h1>      <div className="wrapper">        <header>          <p className="current-date" ref={currentDateRef}>May</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>          {/* 只有在日历内容渲染完成后才显示days列表，虽然通常不这样用 */}          {renderedCalendar && <ul className="days" ref={daysTagRef}></ul>}          {!renderedCalendar && <ul className="days"></ul>} {/* 初始状态或渲染前显示空列表 */}        </div>      </div>    </div>  );};

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

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

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

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

避免直接DOM操作：

使用useState管理日历数据：

// 示例：更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(<li key={`prev-${i}`} className="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" : "";        liTags.push(<li key={`curr-${i}`} className={isToday}>{i}</li>);    }    // 生成下个月的日期    for (let i = (lastDayofMonth + firstDayofMonth) % 7; i < 7; i++) { // 确保填充到完整一周        liTags.push(<li key={`next-${i}`} className="inactive">{i - ((lastDayofMonth + firstDayofMonth) % 7) + 1}</li>);    }    setDaysHtml(liTags);    setCurrentDateText(`${months[currMonth]} ${currYear}`);}, [currYear, currMonth, months]); // 依赖项为currYear, currMonth, monthsreturn (    // ...    <p className="current-date">{currentDateText}</p>    // ...    <ul className="days">{daysHtml}</ul>    // ...);

使用useRef（仅在必要时）：

组件化思维：

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

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