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

    }

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

1 个答案: