React Native — как сравнить два Animated.Values ​​в shouldComponentUpdate?

Я оптимизирую свои элементы плоского списка (прогрессивные изображения) и, чтобы избежать расширения 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
  );        
}

Но поскольку анимированные значения не являются примитивными типами данных, я не знаю, как это сделать без поверхностного сравнения.

Любые идеи? Спасибо.


person Victor Molina    schedule 30.09.2020    source источник


Ответы (1)


Из инициализации вашего состояния:

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

Вы должны иметь доступ к нему следующим образом:

this.state.thumbnailOpacity._value
person AvadaKedavra    schedule 03.10.2020