React技术问询：所有子组件渲染完成后隐藏加载图标

嘿，我来帮你搞定这个问题！你需要在MyWrapper里等所有ItemComponent都渲染（甚至包括它们内部的异步操作）完成后，再隐藏加载图标对吧？我分两种常见场景给你具体方案：

场景1：ItemComponent是纯同步渲染（无内部异步操作） #

如果你的ItemComponent只是把传入的item数据直接渲染出来，没有自己的图片加载、异步请求这类需要等待的操作，那直接用React类组件的生命周期就能搞定：

先给MyWrapper加个加载状态，然后在渲染完成的钩子里更新状态就行：

class MyWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true // 默认处于加载状态
    };
  }

  componentDidMount() {
    // 第一次渲染完所有子组件后，关掉加载
    this.setState({ isLoading: false });
  }

  componentDidUpdate(prevProps) {
    // 如果items数据更新了（比如异步加载新数据），重新渲染后也关掉加载
    if (prevProps.items !== this.props.items) {
      this.setState({ isLoading: false });
    }
  }

  renderItems() {
    // 记得给列表项加唯一key！React要求的，避免不必要的重渲染和警告
    return this.props.items.map(item => (
      <ItemComponent key={item.id} item={item} />
    ));
  }

  renderMessage() {
    return <p>No items to show</p>;
  }

  render() {
    // 加载状态显示图标，否则渲染内容
    if (this.state.isLoading) {
      return <div className="loading-spinner">Loading...</div>;
    }

    return (
      <div>
        {this.props.items.length ? this.renderItems() : this.renderMessage()}
      </div>
    );
  }
}

场景2：ItemComponent内部有异步操作（比如图片加载、数据请求） #

如果你的ItemComponent里有需要等的异步操作（比如加载远程图片、额外请求数据），那得让每个子组件加载完后通知父组件，等所有子组件都报“完成”了再隐藏加载：

第一步：给ItemComponent加个完成回调 #

class ItemComponent extends Component {
  componentDidMount() {
    // 举个例子：模拟图片加载的异步操作
    const itemImage = new Image();
    itemImage.src = this.props.item.imageUrl;
    
    // 图片加载完成（不管成功失败），通知父组件
    itemImage.onload = () => this.props.onItemLoaded();
    itemImage.onerror = () => this.props.onItemLoaded();

    // 如果是其他异步操作（比如fetch），就在.then()里调用onItemLoaded就行
  }

  render() {
    return <div className="item-card">{this.props.item.title}</div>;
  }
}

第二步：在MyWrapper里统计完成的子组件数量 #

class MyWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      loadedItemCount: 0 // 记录已经加载完的子组件数量
    };
  }

  componentDidUpdate(prevProps) {
    // 如果items数据更新了，重置加载状态
    if (prevProps.items !== this.props.items) {
      this.setState({ isLoading: true, loadedItemCount: 0 });
    }
  }

  handleItemLoaded = () => {
    this.setState(prevState => {
      const newLoadedCount = prevState.loadedItemCount + 1;
      // 当所有子组件都加载完了，关掉加载图标
      if (newLoadedCount === this.props.items.length) {
        return { loadedItemCount: newLoadedCount, isLoading: false };
      }
      return { loadedItemCount: newLoadedCount };
    });
  };

  renderItems() {
    return this.props.items.map(item => (
      <ItemComponent
        key={item.id}
        item={item}
        onItemLoaded={this.handleItemLoaded} // 把回调传给子组件
      />
    ));
  }

  renderMessage() {
    return <p>No items to show</p>;
  }

  render() {
    // 只有当有items且还在加载时，才显示加载图标
    if (this.state.isLoading && this.props.items.length > 0) {
      return <div className="loading-spinner">Loading...</div>;
    }

    return (
      <div>
        {this.props.items.length ? this.renderItems() : this.renderMessage()}
      </div>
    );
  }
}

这样就能精准控制加载状态，确保所有子组件的内容都准备好后再隐藏加载图标。如果之后你要转函数组件，用useState和useEffect也能实现一模一样的逻辑，核心思路都是要么利用渲染完成的生命周期，要么通过子组件回调统计完成状态。

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