javascript - 如何在几秒钟后卸载或删除 React 组件？

Question

我有一堆从左到右动画并离开屏幕的组件。这些组件通过数组循环呈现。

在大多数情况下，它运行良好，但如果我有多个这样的组件，Perf 监视器峰值和性能槽的 View 计数。

这是我如何构建它的示例:

父级

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

    }