reactjs - receive - react getderivedstatefromprops

Cómo verificar qué accesorios han cambiado en componentWillReceiveProps

Question

¿Hay alguna forma de verificar qué accesorios cambiaron (sin almacenar los accesorios antiguos en otro lugar) dentro de componentWillReceiveProps ?

es decir

componentWillReceiveProps (newProps) {
  if( /* newProps.profileImage is different to previous props */ ) /* do stuff */
}

Answer 1

Aún puede comparar con this.props.profileImage , porque no se actualiza hasta componentWilReceiveProps se llama a componentWilReceiveProps . Por ejemplo, en los documentos , este ejemplo se utiliza:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Answer 2

Dado que no se recomienda el uso de React 16.3, componentWillReceiveProps, consulte la documentación de unsafe_componentwillreceiveprops en el sitio web de reaccionar.

Utilice getDerivedStateFromProps en getDerivedStateFromProps lugar:

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.profileImage !== prevState.profileImage ) {
    return {stateFoo: ''valueBar''};
  }
}

El valor devuelto se comporta de manera similar a setState .

Answer 3

Sí, puedes comprobar si un objeto específico ha cambiado. this.props refiere a los accesorios antes de que hayan cambiado. Así por ejemplo:

componentWillReceiveProps(newProps) {
  if( newProps.profileImage != this.props.profileImage ) {
    /* do stuff */
  }
}

Nota: los accesorios no necesariamente cambian cada vez que se llama al método, por lo que vale la pena probar para ver qué accesorios han cambiado.

Answer 4

Solo como una nota para cualquiera que encuentre esto en el futuro. Parece que componentWillReceiveProps () va a estar en desuso. Docs ahora sugiere que uses getDerivedStateFromProps (). Las explicaciones de por qué pueden encontrarse aquí: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes

Answer 5

También puede recorrer todos los accesorios para ver qué ha cambiado.

componentWillReceiveProps(nextProps) {
  for (const index in nextProps) {
    if (nextProps[index] !== this.props[index]) {
      console.log(index, this.props[index], ''-->'', nextProps[index]);
    }
  }
}

Answer 6

Tenga en cuenta que la función componenWillReceiveProps quedará en desuso en el futuro. Citando la documentación oficial :

Si usó componentWillReceiveProps para volver a calcular algunos datos solo cuando cambia una propuesta, use un ayudante de memorización en su lugar.

Esto se refiere al caso en el que su cheque dentro de componentWillReceiveProps fue para evitar volver a calcular innecesariamente la misma cosa muchas veces. En la publicación del blog vinculado , sugiere almacenar en caché el resultado de la función costosa para que se pueda consultar, en lugar de volver a calcularla. Esto se puede hacer usando un ayudante como memoize-one .

Si usó componentWillReceiveProps para "restablecer" algún estado cuando cambia un prop., Considere la posibilidad de hacer que un componente esté completamente controlado o no controlado con una llave.

Una vez más, la publicación del blog vinculado describe esto con más detalle, pero en pocas palabras:

• El componente "totalmente controlado" se refiere a un componente funcional sin estado (el componente principal es responsable de manejar el estado).
• La alternativa "totalmente incontrolada" es aquella que solo usa los props para establecer el estado inicial y luego ignora todos los cambios posteriores en los accesorios.

En casos muy raros, es posible que desee utilizar el ciclo de vida de getDerivedStateFromProps como último recurso.

Esta función recibe (props, state) y devuelve cualquier cambio al estado antes de llamar al render , lo que le da el control para hacer lo que quiera.

Respuesta original, para versiones anteriores de React.

En el momento en que se llama a este método de ciclo de vida , this.props refiere al conjunto anterior de props.

Para comparar una sola propiedad foo en las nuevas propiedades con la misma propiedad en las antiguas, puedes comparar newProps.foo con this.props.foo . Así que en tu ejemplo:

componentWillReceiveProps (newProps) {
  if( newProps.profileImage !== this.props.profileImage ) /* do stuff */
}