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

问题描述 投票:1回答:1

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

在大多数情况下,它运行良好,但是如果我有多个以上这些组件,则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本身可以触发吗?

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

javascript reactjs react-native expo
1个回答
0
投票

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

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

    }

推荐问答