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

Question

我有一堆组件从左到右制作动画，并离开了屏幕。这些组件通过遍历数组来呈现。

在大多数情况下，它运行良好，但是如果我有多个以上这些组件，则Perf监视器峰值和性能容器上的视图计数。

这是我的结构示例：

父母

state = {
  myArray: []
}

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

动画容器

render() {

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

}

动画项目

render() {

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

}

几秒钟后或离开屏幕后，是否可以卸下或卸下这些AnimatedItem组件？ AnimatedItem本身可以触发吗？

由于这些组件的数量可以动态增长，因此，我希望通过删除那些看不见的组件来保持这种体验尽可能的顺畅。

Answer 1

您可以在最后一个组件中执行此操作

   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>
      );

    }