Parece componentWillReceiveProps
que se eliminará por completo en las próximas versiones, a favor de un nuevo método de ciclo de vida getDerivedStateFromProps
: static getDerivedStateFromProps () .
Tras la inspección, parece que ahora no puede hacer una comparación directa entre this.props
y nextProps
, como puede hacerlo componentWillReceiveProps
. ¿Hay alguna forma de evitar esto?
Además, ahora devuelve un objeto. ¿Estoy en lo cierto al suponer que el valor de retorno es esencialmente this.setState
?
A continuación se muestra un ejemplo que encontré en línea: Estado derivado de accesorios / estado .
antes de
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
Después
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;
}
}
fuente
componentWillReceiveProps
getDerivedStateFromProps
nunca fue realmente destinado a la memorización . Consulte mi respuesta a continuación, donde describí el enfoque recomendado ....
? Es decir, si devolvemos el objeto de estado completo o solo la parte que nos interesa.A medida que recientemente publicado en el blog de React , en la gran mayoría de los casos no se necesita
getDerivedStateFromProps
en absoluto .Si solo desea calcular algunos datos derivados, ya sea:
render
memoize-one
.Aquí está el ejemplo más simple "después":
Consulte esta sección de la publicación del blog para obtener más información.
fuente
componentWillReceiveProps
fue simple y funcionó. ¿Por qué eliminarlo para esta basura estática ...Como lo menciona Dan Abramov
De hecho, utilizamos ese enfoque con la primera memoria para cualquier tipo de accesorios de proxy para cálculos de estado.
Nuestro código se ve de esta manera
Los beneficios de esto son que no necesita codificar toneladas de repeticiones de comparación dentro
getDerivedStateFromProps
ocomponentWillReceiveProps
puede omitir la inicialización de copiar y pegar dentro de un constructor.NOTA:
Este enfoque se usa solo para representar los accesorios para que se declaren, en caso de que tenga alguna lógica de estado interno, aún debe manejarse en los ciclos de vida de los componentes.
fuente