Next.js中通过document.querySelector修改map元素为何触发重渲染？

一、重渲染的原因 #

• 你用document.querySelector直接操作DOM本身不会触发React重渲染，但如果changeSlide函数里无意间修改了组件的state（哪怕是误操作），React就会触发组件重渲染——因为React是状态驱动视图的，状态变化必然会引发视图更新。
• 要是导航按钮的onClick是内联匿名函数（比如onClick={() => changeSlide(1)}），每次组件渲染时都会生成新的函数引用，若按钮是独立子组件且没做性能优化，会触发子组件重渲染，进而带动父组件重渲染。
• 还有一种可能：组件依赖的父组件状态或props在点击后发生了变化，也会导致当前组件跟着重渲染。

二、正确的实现方式 #

React的核心是状态驱动视图，完全不需要手动操作DOM来切换显示隐藏，用状态管理当前激活的slide即可：

1. 基础实现（函数组件） #

import { useState } from 'react';

function SlideShow({ slides }) {
  // 用状态记录当前显示的幻灯片索引
  const [currentIndex, setCurrentIndex] = useState(0);

  // 切换幻灯片的逻辑，只更新状态
  const changeSlide = (index) => {
    setCurrentIndex(index);
  };

  return (
    <div>
      {/* 导航按钮 */}
      <div className="slide-nav">
        {slides.map((_, index) => (
          <button key={index} onClick={() => changeSlide(index)}>
            第{index + 1}页
          </button>
        ))}
      </div>
      {/* 幻灯片内容区 */}
      <div className="slides-wrap">
        {slides.map((slide, index) => (
          <div 
            key={index}
            className={`slide-item ${index !== currentIndex ? 'hidden' : ''}`}
          >
            {slide.content}
          </div>
        ))}
      </div>
    </div>
  );
}

2. 核心逻辑说明 #

• 用currentIndex状态保存当前要显示的幻灯片索引，点击导航按钮时仅更新这个状态。
• 渲染幻灯片时，通过对比循环索引和currentIndex，动态决定是否添加hidden类。
• React会自动根据状态变化更新DOM，完全不需要手动查询DOM元素，也不会出现无意义的重渲染。

3. 可选性能优化 #

如果幻灯片数量较多，可通过缓存函数避免不必要的子组件重渲染：

import { useState, useCallback } from 'react';

function SlideShow({ slides }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // 用useCallback缓存函数，避免每次渲染生成新引用
  const changeSlide = useCallback((index) => {
    setCurrentIndex(index);
  }, []);

  return (
    // 其余代码和基础实现一致
  );
}

内容的提问来源于stack exchange，提问作者giveearholdtongue