几秒钟后如何卸载或删除 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

在您的最后一个组件中，您可以执行此操作&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; // have a state here&nbsp;&nbsp; &nbsp; &nbsp; // const [isAnimationFinished, setIsAnimationFinished ] = useState(false)&nbsp; &nbsp; &nbsp; if(isAnimationFinished)&nbsp; &nbsp; &nbsp; &nbsp; return null&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Animated Item layout, etc.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // when animation ends call&nbsp; setIsAnimationFinished(true)&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }