React Native - 如何比较 shouldComponentUpdate 中的两个 Animated.Values？

Question

我正在优化我的平面列表项（渐进式图像）并避免扩展 React.PureComponent 我决定实现我自己的 shouldComponentUpdate 生命周期方法。

我的渐进式图像有两个动画值：

 1. thumbnailOpacity 2. imageOpacity

我的应该组件更新必须如下所示：

state = {
   isLoading: true,
   thumbnailOpacity: new Animated.Value(0),
   imageOpacity: new Animated.Value(0)
}

shouldComponentUpdate(nextProps, nextState) {
  /*
    React's PureComponent implement a shouldComponentUpdate with shallow comparison.
    This is expensive here, because it need to check all our props. For a good bit-level performance,
    use the strictest rules for our list item.

    This component must re-render only when the state change.
  */

  return (
     nextState.isLoading !== this.state.isLoading ||
     nextState.thumbnailOpacity !== this.state.thumbnailOpacity ||
     nextState.imageOpacity !== this.state.imageOpacity
  );        
}

但是由于动画值不是原始数据类型，如果没有浅层比较，我不知道如何做到这一点。

有任何想法吗？ 谢谢你。

Answer 1

从您的状态初始化：

state = {
   ...
   thumbnailOpacity: new Animated.Value(0),
   imageOpacity: new Animated.Value(0)
}

您应该能够像这样访问它：

this.state.thumbnailOpacity._value