React父组件如何增量渲染子组件？解决批量渲染卡顿问题

这个问题很常见——当一次性渲染上百个组件时，React会同步完成所有虚拟DOM的构建和diff，直接占满主线程，导致UI卡顿甚至无响应。要实现增量渲染，核心思路是把渲染任务拆分成小块，让浏览器在每块渲染之间有时间处理用户交互、重绘等任务，避免阻塞。下面给你几个实用的解决方案：

1. 用setTimeout分批渲染（兼容所有React版本） #

这是最经典的方案，利用浏览器的事件循环，把每批渲染任务放到宏任务队列里，让浏览器在批与批之间有空隙处理其他事情。

修改你的Parent组件，通过状态控制已渲染的子组件数量，每次渲染一批（比如10个），然后用setTimeout触发下一批：

Parent = React.createClass({
  getInitialState() {
    return {
      renderedCount: 10 // 初始先渲染10个，数量可根据实际调整
    };
  },

  componentDidMount() {
    // 组件挂载后开始分批渲染剩余内容
    this.renderMore();
  },

  renderMore() {
    const totalMessages = this.props.messages.length;
    const currentRendered = this.state.renderedCount;
    
    if (currentRendered >= totalMessages) return;

    // 每次追加10个，避免一次渲染太多
    const nextCount = Math.min(currentRendered + 10, totalMessages);
    setTimeout(() => {
      this.setState({ renderedCount: nextCount });
      this.renderMore();
    }, 0); // 0ms延迟让浏览器优先处理当前队列的任务
  },

  getChildren() {
    const { messages } = this.props;
    const { renderedCount } = this.state;
    // 只渲染前renderedCount个子组件
    return messages.slice(0, renderedCount).map((child, index) => {
      // 务必加key，React需要它来高效更新列表
      return <FooBar key={index} c={child} />;
    });
  },

  render() {
    return (
      <div>
        {this.getChildren()}
      </div>
    );
  }
});

注意：如果你的messages有唯一ID，最好用ID作为key，比index更可靠（避免列表顺序变化时的不必要重渲染）。

2. 用requestIdleCallback更智能地利用空闲时间 #

setTimeout不管浏览器忙不忙都会执行，而requestIdleCallback会在浏览器真正空闲的时候才触发渲染任务，不会抢占用户交互（比如点击、滚动）的优先级，体验更好。

只需要把上面的setTimeout替换成requestIdleCallback即可：

renderMore() {
  const totalMessages = this.props.messages.length;
  const currentRendered = this.state.renderedCount;
  
  if (currentRendered >= totalMessages) return;

  const nextCount = Math.min(currentRendered + 10, totalMessages);
  requestIdleCallback(() => {
    this.setState({ renderedCount: nextCount });
    this.renderMore();
  });
}

小提示：旧浏览器（比如IE）不支持这个API，你可以找个polyfill来兼容。

3. React 18+ 用startTransition（官方推荐） #

如果你已经升级到React 18，官方提供的startTransition是最优解——它能把非紧急的渲染标记为“过渡任务”，React会优先处理用户的紧急操作（比如输入、点击），等主线程空闲了再完成这些过渡渲染。

首先导入startTransition，然后修改renderMore：

import { startTransition } from 'react';

Parent = React.createClass({
  // ... 其他状态和生命周期不变

  renderMore() {
    const totalMessages = this.props.messages.length;
    const currentRendered = this.state.renderedCount;
    
    if (currentRendered >= totalMessages) return;

    const nextCount = Math.min(currentRendered + 10, totalMessages);
    startTransition(() => {
      this.setState({ renderedCount: nextCount });
      this.renderMore();
    });
  },

  // ... 其他方法不变
});

这个方法不需要依赖浏览器API，完全由React调度，体验更流畅。

额外优化：给子组件加缓存 #

不管用哪种增量渲染方案，都建议给FooBar组件加上React.memo，避免子组件在不必要的时候重渲染：

const FooBar = React.memo(({ c }) => {
  // 子组件的渲染逻辑
});

React.memo会对比组件的props，只有当props变化时才重新渲染，能大幅减少不必要的渲染开销。

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