Remove UNSAFE_componentWillReceiveProps

Summary:
This diff removes `UNSAFE_componentWillReceiveProps` and adds the changes to `componentDidUpdate` instead.

Why use `componentDidUpdate`? When reading through the [React docs on removing UNSAFE_componentWillReceiveProps](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops), it says:
> If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

The original usage of `UNSAFE_componentWillReceiveProps` updates the content inset when `props.contentInset` changes. However, we don't always want it to update if the content inset hasn't changed, as calling `setValue` will reset the animated value unnecessarily, and kill any current animations (which we don't want to do). [React Native doc on setValue for reference](https://reactnative.dev/docs/animatedvalue#setvalue).

Changelog:
[General] Use componentDidUpdate instead of UNSAFE_componentwillReceiveProps in ScrollView

Reviewed By: lunaleaps

Differential Revision: D26487276

fbshipit-source-id: 77419deacf5db676cd721b58f34932bd6ca2399f
This commit is contained in:
Kacie Bawiec 2021-02-17 14:57:30 -08:00 коммит произвёл Facebook GitHub Bot
Родитель 3af0c84aa5
Коммит aaede1029d
1 изменённых файлов: 7 добавлений и 9 удалений

Просмотреть файл

@ -799,19 +799,17 @@ class ScrollView extends React.Component<Props, State> {
this._updateAnimatedNodeAttachment(); this._updateAnimatedNodeAttachment();
} }
UNSAFE_componentWillReceiveProps(nextProps: Props) { componentDidUpdate(prevProps: Props) {
const currentContentInsetTop = this.props.contentInset const prevContentInsetTop = prevProps.contentInset
? prevProps.contentInset.top
: 0;
const newContentInsetTop = this.props.contentInset
? this.props.contentInset.top ? this.props.contentInset.top
: 0; : 0;
const nextContentInsetTop = nextProps.contentInset if (prevContentInsetTop !== newContentInsetTop) {
? nextProps.contentInset.top this._scrollAnimatedValue.setOffset(newContentInsetTop || 0);
: 0;
if (currentContentInsetTop !== nextContentInsetTop) {
this._scrollAnimatedValue.setOffset(nextContentInsetTop || 0);
} }
}
componentDidUpdate() {
this._updateAnimatedNodeAttachment(); this._updateAnimatedNodeAttachment();
} }