Wygląda na componentWillReceiveProps
to, że w nadchodzących wersjach zostanie całkowicie wycofane na korzyść nowej metody cyklu życia getDerivedStateFromProps
: statycznej getDerivedStateFromProps () .
Po sprawdzeniu wygląda na to, że nie możesz teraz dokonać bezpośredniego porównania między this.props
i nextProps
, tak jak możesz w componentWillReceiveProps
. Czy można to obejść?
Ponadto zwraca teraz obiekt. Czy mam rację, zakładając, że wartość zwracana jest zasadniczo this.setState
?
Poniżej znajduje się przykład, który znalazłem online: Stan wyprowadzony z właściwości / stanu .
Przed
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
Po
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;
}
}
źródło
componentWillReceiveProps
getDerivedStateFromProps
nigdy nie był przeznaczony do zapamiętywania . Zobacz moją odpowiedź poniżej, gdzie zamiast tego opisałem zalecane podejście ....
? Czyli powinniśmy zwrócić cały obiekt stanu lub tylko tę część, na której nam zależy.Jak niedawno opublikowaliśmy na blogu React , w większości przypadków nie potrzebujesz go
getDerivedStateFromProps
wcale .Jeśli chcesz tylko obliczyć niektóre dane pochodne:
render
memoize-one
.Oto najprostszy przykład „po”:
Sprawdź tę sekcję w poście na blogu, aby dowiedzieć się więcej.
źródło
componentWillReceiveProps
był prosty i działał. Po co go usuwać z powodu tych statycznych śmieci ...Jak wspomniał Dan Abramov
W rzeczywistości używamy tego podejścia z memoise dla dowolnego rodzaju podpowiedzi zastępczych do obliczeń stanu.
Nasz kod wygląda w ten sposób
Zaletą tego rozwiązania jest to, że nie musisz kodować wielu wzorców porównawczych wewnątrz
getDerivedStateFromProps
lubcomponentWillReceiveProps
możesz pominąć inicjalizację kopiuj-wklej wewnątrz konstruktora.UWAGA:
To podejście jest używane tylko do pośredniczenia właściwości w celu określenia, jeśli masz jakąś logikę stanu wewnętrznego, nadal musi być obsługiwana w cyklach życia komponentów.
źródło