在React中通过JS直接修改元素属性是否可行？有什么更优实现方案？

直接操作classList的影响 #

你提到的原生classList.add/remove操作本身不会损耗React虚拟DOM的diff性能，但存在严重的逻辑隐患：

• 如果你操作的元素className后续被React的状态更新触发重渲染，React会直接用虚拟DOM中存储的className值覆盖你手动修改的结果，导致active类意外丢失，出现状态和DOM不一致的bug
• 这种脱离React控制的DOM操作会让状态流转不可追溯，大幅提升后续调试和维护的成本

符合React设计逻辑的最优实现方式 #

核心原则是所有DOM变更都由React状态驱动，不要直接操作原生DOM：

1. 用状态存储每个元素的可见性
   可以用Map或者数组存储每个监听元素的可见性状态，key为元素的唯一标识，value为布尔值表示是否在可视区域内
2. 动态拼接类名
   渲染元素时直接根据对应状态判断是否添加active类，完全交给React控制类名变更
3. 合理封装Intersection Observer逻辑
   用useRef存储observer实例，useEffect处理监听的注册和销毁，避免内存泄漏

下面是最简实现示例：

import { useState, useRef, useEffect } from 'react';

function ObserverList() {
  // 存储每个元素的可见性状态，key为元素id
  const [inViewMap, setInViewMap] = useState(new Map());
  // 存储observer实例避免重复创建
  const observerRef = useRef(null);
  // 存储需要监听的元素引用
  const itemsRef = useRef([]);

  useEffect(() => {
    // 初始化Intersection Observer
    observerRef.current = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const itemId = entry.target.dataset.id;
        setInViewMap(prev => {
          const newMap = new Map(prev);
          newMap.set(itemId, entry.isIntersecting);
          return newMap;
        });
      });
    }, { threshold: 0.1 });

    // 监听所有元素
    itemsRef.current.forEach(el => {
      if (el) observerRef.current.observe(el);
    });

    // 组件卸载时销毁监听
    return () => {
      observerRef.current?.disconnect();
    };
  }, []);

  // 示例渲染10个需要监听的div
  return (
    <div className="list-container">
      {Array.from({ length: 10 }).map((_, index) => (
        <div
          key={index}
          data-id={index}
          ref={el => itemsRef.current[index] = el}
          // 直接根据状态动态控制类名
          className={`list-item ${inViewMap.get(String(index)) ? 'active' : ''}`}
        >
          第{index + 1}个元素
        </div>
      ))}
    </div>
  );
}

这种实现完全遵循React的状态驱动逻辑，虚拟DOM的diff流程完全不受干扰，不会出现状态不一致的问题，性能也优于手动操作DOM的方案。

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