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