React中按父元素位置维护Block组件有序引用列表的实现

要实现按实际渲染顺序维护Block组件引用，并同步更新增删操作，需要解决两个核心问题：引用列表与渲染顺序同步、增删操作时自动更新引用。以下是具体实现方案：

1. 重构渲染逻辑，实时构建引用列表 #

放弃直接通过索引赋值的方式，改为在每次渲染时重新构建引用数组，确保数组顺序与实际渲染的Block组件完全一致：

import React, { Fragment } from "react";

...

type Blocks = Block1 | Block2 | Block3;

interface Props {
  data: ListData[];
}

interface State {
  data: ListData[];
}

export default class Page extends React.Component<Props, State> {

  state: State;
  private blocks: Blocks[] = [];

  constructor(props: Props) {
    super(props);
    this.state = {
      data: props.data
    };
  }

  // 随机插入新数据项
  private addListDataItems(): void {
    const newItem: ListData = { 
      id: `item-${Date.now()}-${Math.random()}`,
      ...其他字段
    };
    const insertIdx = Math.floor(Math.random() * this.state.data.length);
    this.setState(prev => ({
      data: [
        ...prev.data.slice(0, insertIdx),
        newItem,
        ...prev.data.slice(insertIdx)
      ]
    }));
  }

  // 随机删除一个数据项
  private removeListDataItems(): void {
    if (this.state.data.length === 0) return;
    const deleteIdx = Math.floor(Math.random() * this.state.data.length);
    this.setState(prev => ({
      data: prev.data.filter((_, idx) => idx !== deleteIdx)
    }));
  }

  render(): JSX.Element {
    // 渲染前清空引用数组，确保每次渲染都是全新的列表
    this.blocks = [];

    // 预先生成所有要渲染的Block组件，同时收集引用
    const renderedBlocks = this.state.data.flatMap((li: ListData, i: number) => {
      const items: React.ReactNode[] = [];

      // 条件渲染Block1
      if ((i % 10) === 0) {
        items.push(
          <Block1
            key={`block1-${li.id}-${i}`}
            ref={(e: Block1): void => {
              // 组件挂载时添加引用
              if (e) this.blocks.push(e);
            }}
            ... // 传递props
          />
        );
      }

      // 条件渲染Block2
      if (/* 你的Block2条件逻辑，如li.type === 'type2' */) {
        items.push(
          <Block2
            key={`block2-${li.id}-${i}`}
            ref={(e: Block2): void => {
              if (e) this.blocks.push(e);
            }}
            ... // 传递props
          />
        );
      }

      // 条件渲染Block3
      if (/* 你的Block3条件逻辑，如li.isActive */) {
        items.push(
          <Block3
            key={`block3-${li.id}-${i}`}
            ref={(e: Block3): void => {
              if (e) this.blocks.push(e);
            }}
            ... // 传递props
          />
        );
      }

      return items;
    });

    return (
      <>
        <div className="page">
          {renderedBlocks}
        </div>
      </>
    );
  }
}

2. 关键优化点说明 #

• 清空引用数组：每次render开头重置this.blocks，确保引用列表只包含当前渲染的组件。
• 唯一Key值：为每个Block组件生成包含数据项唯一标识（如li.id）的key，避免因数据增删导致的组件不必要重渲染，同时保证React正确识别组件的挂载/卸载状态。
• FlatMap生成渲染列表：用flatMap遍历数据项，将每个数据项对应的多个Block组件扁平化处理，直接得到按顺序排列的渲染列表，确保this.blocks的顺序与DOM中组件的顺序完全一致。
• Ref回调处理：仅当组件挂载（e不为null）时将引用加入数组，避免卸载时的null值干扰。

3. 验证引用同步 #

当调用addListDataItems或removeListDataItems时，state.data更新触发重新渲染，this.blocks会自动重新构建，完全同步当前DOM中所有Block组件的引用，顺序与实际渲染位置一致。

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