React性能优化精髓之一：频繁setState导致滚动卡顿的解决方案

在开发一个 List 页面时，我们遇到了一个典型的React性能问题：页面在滚动时出现明显卡顿。这个问题的调试过程充满了误判和重新思考，最终发现了一个重要的性能优化原则。

问题现象

我们有一个监控仪表盘页面，包含多个图表组件。用户在滚动浏览图表时，页面出现了明显的卡顿现象，特别是在图表数量较多时，滚动体验极差。

// 简化的组件结构
const Dashboard = () => {
  const [graphs, setGraphs] = useState([]);
  const [graphsVisibleMap, setGraphsVisibleMap] = useState({});
  
  return (
    <div>
      {graphs.map(graph => (
        <GraphComponent 
          key={graph.id}
          data={graph}
          onVisibilityChange={handleGraphVisibleChange}
        />
      ))}
    </div>
  );
};

初步分析：怀疑IntersectionObserver

最初我们怀疑是IntersectionObserver配置不当导致的性能问题，因为我们使用它来监听图表的可见性：

// 初始的 IntersectionObserver 实现
setupIntersectionObserver() {
  this.observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const graphId = entry.target.getAttribute('data-graph-id');
      if (graphId) {
        // 每次可见性变化都会调用这里
        this.props.onGraphVisibleChange(Number(graphId), entry.isIntersecting, { 
          graphRefs: Object.keys(this.graphRefs) 
        });
      }
    });
  }, {
    threshold: 0.1
  });
}

错误的优化尝试

基于这个假设，我们尝试了多种IntersectionObserver的优化方案：

1. 减少触发频率

// 尝试1：提高阈值，减少rootMargin
{
  threshold: 0.5,      // 只在50%可见时触发
  rootMargin: '0px',   // 移除提前触发
}

2. 添加防抖和节流

// 尝试2：使用防抖处理回调
this.observer = new IntersectionObserver(
  _.debounce((entries) => {
    // 处理逻辑
  }, 100), 
  options
);

3. 批量处理可见性变化

// 尝试3：缓存变化，批量处理
const visibilityBuffer = new Map();

this.observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const graphId = entry.target.getAttribute('data-graph-id');
    if (graphId) {
      visibilityBuffer.set(graphId, entry.isIntersecting);
    }
  });
  
  // 延迟批量处理
  setTimeout(() => {
    this.processBatchedUpdates(visibilityBuffer);
  }, 50);
}, options);

结果：这些优化都没有解决根本问题。

关键发现：真正的罪魁祸首

// 性能杀手：滚动时频繁调用setState
handleGraphVisibleChange = (id, visible) => {
  const newMap = { ...this.state.graphsVisibleMap };
  newMap[id] = visible;
  this.setState({ graphsVisibleMap: newMap }); // 每秒可能调用数百次
};

影响：

• 滚动时每秒数百次 setState 调用
• 每次调用触发组件重渲染
• 主线程被阻塞，造成卡顿

解决方案

将不需要触发重渲染的数据从 state 移到实例属性：

class Component extends React.Component {
  constructor() {
    super();
    // 移到实例属性
    this.graphsVisibleMap = {};
    
    this.state = {
      // graphsVisibleMap: {}, // 删除这行
      // 只保留需要触发重渲染的数据
    };
  }

  handleGraphVisibleChange = (id, visible) => {
    // 直接修改实例属性，不触发重渲染
    this.graphsVisibleMap[id] = visible;
    // 不调用 setState
  };
}

总结

• state: 需要触发重渲染的UI相关数据
• 实例属性: 高频更新但不影响UI的内部状态

人生感悟：不是所有数据都需要放在 state 中，合理的数据分层比复杂的防抖节流更有效。