setter 方法会触发 React 中的 DOM 重新渲染吗？答案

【问题标题】：Do setter methods trigger a DOM rerender in React?setter 方法会触发 React 中的 DOM 重新渲染吗？
【发布时间】：2021-01-13 10:39:38
【问题描述】：

我正在通过一个基本的日历应用程序学习 React，该应用程序在很大程度上依赖于使用 Date() 对象。我正在尝试显示选定的月份，通过单击几个字体很棒的箭头图标来更改它。

使用上下文 API 和 useState，我使用“setDateObject”回调更新日期，该回调使用 Date 对象的 setter 函数“setMonth()”。

只是做一些控制台日志显示日期已成功更新状态，但

标记中显示的日期没有被重新呈现。我尝试使用硬类型对象切换日期对象并在“incrementMonth”方法中手动增加月份，这会触发重新渲染。

所以要么我误解了某些东西，要么使用 setter 函数更新日期对象不会触发重新渲染。有人有过这种经历吗？

提前致谢！

对象

import React, { useContext } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

// Styling
import style from "../styles/Calendar.css"

// Assets
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
import { faArrowRight } from "@fortawesome/free-solid-svg-icons"

// Contexts
import { DateContext } from "./context/DateContext.js"

const Calendar = () =>  {
    const [dateObj, setDateObj] = useContext(DateContext)
    const monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    const incrementMonth = () => {
        setDateObj(prevDate => {
            let newDate = prevDate
            newDate.setMonth(prevDate.getMonth() + 1)
            return newDate
        })
    }
    
    const decrementMonth = () => {
        setDateObj(prevDate => {
            let newDate = prevDate
            newDate.setMonth(prevDate.getMonth() - 1)
            return newDate
        })
    }
    
    return(
        <div style={style} className="CalendarWrapper">
            <div className="MonthSelector">
                <FontAwesomeIcon icon={faArrowLeft} onClick={decrementMonth} className="hoverArrow"/>
                <p>{ `${ monthArray[dateObj.getMonth()] } ${ dateObj.getFullYear() }` }</p>
                <FontAwesomeIcon icon={faArrowRight} onClick={incrementMonth} className="hoverArrow"/>
            </div>
        </div>
    )
}

export default Calendar

上下文

import React, { useState, createContext } from "react"

export const DateContext = createContext(null)

export const DateProvider = props => {
    const [dateObj, setDateObj] = useState(new Date())
    return(
        <DateContext.Provider value={[dateObj, setDateObj]}>
            {props.children}
        </DateContext.Provider>
    )
}

【问题讨论】：

标签： reactjs react-hooks getter-setter use-state use-context

【解决方案1】：

React 尝试在重新渲染方面变得聪明。如果新状态和旧状态引用相同的值，it doesn't re-render。

您实际上是使用相同的日期对象调用setDateObj，即使您更改了其内部数据。换句话说，如果newDate === prevDate，它不会重新渲染。您可以通过复制日期来避免这种情况：

const newDate = new Date(prevDate);

【讨论】：