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

      );

    }