Похоже, что componentWillReceiveProps
в следующих выпусках он будет полностью прекращен в пользу нового метода жизненного цикла getDerivedStateFromProps
: static getDerivedStateFromProps () .
При осмотре похоже, что теперь вы не можете провести прямое сравнение между this.props
и nextProps
, как вы можете в componentWillReceiveProps
. Есть ли способ обойти это?
Кроме того, теперь он возвращает объект. Правильно ли я предполагаю, что возвращаемое значение по существу this.setState
?
Ниже приведен пример, который я нашел в Интернете: Состояние, полученное из props / state .
Перед
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
После
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.someMirroredValue !== nextProps.someValue) {
return {
derivedData: computeDerivedState(nextProps),
someMirroredValue: nextProps.someValue
};
}
// Return null to indicate no change to state.
return null;
}
}
источник
componentWillReceiveProps
getDerivedStateFromProps
никогда не предназначалось для мемоизации . См. Мой ответ ниже, где я описал рекомендуемый подход ....
? То есть должны мы вернуть весь объект состояния или только ту часть, которая нам нужна.Как мы недавно опубликовал на React блог , в подавляющем большинстве случаев вам не нужно
getDerivedStateFromProps
вообще .Если вы просто хотите вычислить производные данные, либо:
render
memoize-one
.Вот простейший пример «после»:
import memoize from "memoize-one"; class ExampleComponent extends React.Component { getDerivedData = memoize(computeDerivedState); render() { const derivedData = this.getDerivedData(this.props.someValue); // ... } }
Прочтите этот раздел сообщения в блоге, чтобы узнать больше.
источник
componentWillReceiveProps
было просто, и это сработало. Зачем убирать его из-за этого статического мусора ...Как сказал Дан Абрамов
На самом деле мы используем этот подход с memoise one для любого типа прокси для констатации вычислений.
Наш код выглядит так
// ./decorators/memoized.js import memoizeOne from 'memoize-one'; export function memoized(target, key, descriptor) { descriptor.value = memoizeOne(descriptor.value); return descriptor; } // ./components/exampleComponent.js import React from 'react'; import { memoized } from 'src/decorators'; class ExampleComponent extends React.Component { buildValuesFromProps() { const { watchedProp1, watchedProp2, watchedProp3, watchedProp4, watchedProp5, } = this.props return { value1: buildValue1(watchedProp1, watchedProp2), value2: buildValue2(watchedProp1, watchedProp3, watchedProp5), value3: buildValue3(watchedProp3, watchedProp4, watchedProp5), } } @memoized buildValue1(watchedProp1, watchedProp2) { return ...; } @memoized buildValue2(watchedProp1, watchedProp3, watchedProp5) { return ...; } @memoized buildValue3(watchedProp3, watchedProp4, watchedProp5) { return ...; } render() { const { value1, value2, value3 } = this.buildValuesFromProps(); return ( <div> <Component1 value={value1}> <Component2 value={value2}> <Component3 value={value3}> </div> ); } }
Преимущества в том, что вам не нужно кодировать тонны шаблонов сравнения внутри
getDerivedStateFromProps
илиcomponentWillReceiveProps
вы можете пропустить инициализацию копирования и вставки внутри конструктора.НОТА:
Этот подход используется только для проксирования свойств в состояние, в случае, если у вас есть внутренняя логика состояния, ее все равно нужно обрабатывать в жизненных циклах компонентов.
источник
getDerivedStateFromProps используется всякий раз, когда вы хотите обновить состояние перед рендерингом и обновить состояние реквизита
GetDerivedStateFromPropd обновляет значение статистики с помощью значения props
прочтите https://www.w3schools.com/REACT/react_lifecycle.asp#:~:text=Lifecycle%20of%20Components,Mounting%2C%20Updating%2C%20and%20Unmounting .
источник