Javascript 如何在几秒钟后卸载或移除React组件？

我有一堆组件，可以从左到右进行动画制作，然后离开屏幕。这些组件通过数组循环渲染

在大多数情况下，它工作得很好，但如果我有超过两个这样的组件，那么视图将取决于性能监视器峰值和性能坦克

这是我如何构建它的一个示例：

家长

state = {
  myArray: []
}

<View>
  <AnimationContainer myData={this.state.myArray}  />
</View>

状态={
myArray:[]
}

动画容器

render() {

  return (
    <View>
      {this.props.myData.map(function(arrayItem, i) {
        return (
          <AnimatedItem key={i} arrayItem={arrayItem} />
        );
      })}
    </View>
  );

}

render（）{
返回(
{this.props.myData.map（函数（arrayItem，i）{
返回(
);
})}
);
}

动画项目

render() {

  return (
    <View>
      // Animated Item layout, etc.
    </View>
  );

}

render（）{
返回(
//动画项目布局等。
);
}

是否可以在几秒钟后或当它们离开屏幕时卸载或删除这些

AnimatedItem

组件？这是

AnimatedItem

本身可以触发的吗

---

由于这些组件的数量可以动态增长，我希望通过删除不在视图中的组件来尽可能地保持这种体验。

在上一个组件中，您可以这样做

   render() {
      // have a state here 
      // const [isAnimationFinished, setIsAnimationFinished ] = useState(false)
      if(isAnimationFinished)
        return null
      return (
        <View>
          // Animated Item layout, etc.
          // when animation ends call  setIsAnimationFinished(true)
        </View>
      );

    }

render（）{
//这里有一个状态
//常量[isAnimationFinished，setIsAnimationFinished]=useState（false）
如果（isAnimationFinished）
返回空
返回(
//动画项目布局等。
//动画结束时调用setIsAnimationFinished（true）
);
}

它们是如何制作动画的？你可以在数组完成后更新数组并删除每个元素。难道你不能将

isVisible

道具之类的东西传递给正在制作动画的组件，使其仅在屏幕边界框内渲染内容吗？我通过下面的Renaldo示例解决了这个问题。是的，正如@edu_uu所提到的，我添加了一个道具并在动画之后改变了状态。我找不出正确的位置来做这件事，但在最后一个组件中改变状态就成功了。