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