React.Componente

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

componentWillUnmount()

No debe llamar a setState() en componentWillUnmount() porque el componente nunca se volverá a renderizar. Una vez que se desmonta una instancia de componente, nunca se volverá a montar.

Métodos de ciclo de vida poco utilizados

Los métodos de esta sección corresponden a casos de uso poco frecuentes. Son útiles de vez en cuando, pero la mayoría de sus componentes probablemente no necesiten ninguno de ellos. Puede ver la mayoría de los métodos a continuación en este diagrama de ciclo de vida si hace clic en la casilla de verificación «Mostrar ciclos de vida menos comunes» en la parte superior.

shouldComponentUpdate ()

shouldComponentUpdate(nextProps, nextState)

Use shouldComponentUpdate() para que React sepa si la salida de un componente no se ve afectada por el cambio actual de estado o accesorios. El comportamiento predeterminado es volver a renderizar en cada cambio de estado, y en la gran mayoría de los casos debe confiar en el comportamiento predeterminado.

shouldComponentUpdate() se invoca antes de renderizar cuando se reciben nuevos apoyos o estados. El valor predeterminado es true. Este método no se llama para el renderizado inicial ni cuando se usa forceUpdate().

Este método solo existe como optimización de rendimiento. No confíe en él para» prevenir » una representación, ya que esto puede conducir a errores. Considere usar el PureComponent incorporado en lugar de escribir shouldComponentUpdate() a mano. PureComponent realiza una comparación superficial de accesorios y estado, y reduce la posibilidad de que omita una actualización necesaria.

Si usted está seguro de que desea escribir a mano, usted puede comparar this.propsnextProps y this.statenextState y volver false decirle a Reaccionar de la actualización pueden ser omitidos. Tenga en cuenta que devolver false no impide que los componentes secundarios vuelvan a renderizarse cuando su estado cambia.

No recomendamos realizar comprobaciones de igualdad profundas ni usar JSON.stringify()en shouldComponentUpdate(). Es muy ineficiente y dañará el rendimiento.

en la Actualidad, si shouldComponentUpdate() devuelve false, luego UNSAFE_componentWillUpdate()render() y componentDidUpdate() no va a ser invocado. En el futuro, React puede tratar shouldComponentUpdate() como una sugerencia en lugar de una directiva estricta, y devolver false aún puede resultar en una nueva representación del componente.

static getDerivedStateFromProps ()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps se invoca justo antes de llamar al método de renderizado, tanto en el montaje inicial como en las actualizaciones posteriores. Debe devolver un objeto para actualizar el estado, o null para no actualizar nada.

Este método existe para casos de uso poco frecuentes en los que el estado depende de los cambios en los accesorios a lo largo del tiempo. Por ejemplo, podría ser útil para implementar un componente <Transition> que compare sus hijos anteriores y siguientes para decidir a cuál de ellos se debe animar y a cuál no.

Derivar el estado conduce a código detallado y hace que sus componentes sean difíciles de pensar.Asegúrese de estar familiarizado con alternativas más simples:

• Si necesita realizar un efecto secundario (por ejemplo, obtención de datos o una animación) en respuesta a un cambio en los accesorios, use componentDidUpdate ciclo de vida en su lugar.
• Si desea volver a calcular algunos datos solo cuando cambia una propiedad, utilice un ayudante de memoización en su lugar.
• Si desea «restablecer»algún estado cuando cambie una propiedad, considere hacer un componente totalmente controlado o totalmente incontrolado con un key en su lugar.

Este método no tiene acceso a la instancia del componente. Si lo desea, puede reutilizar algún código entre getDerivedStateFromProps() y los otros métodos de clase extrayendo funciones puras de las propiedades de los componentes y el estado fuera de la definición de clase.

Tenga en cuenta que este método se activa en cada renderizado, independientemente de la causa. Esto contrasta con UNSAFE_componentWillReceiveProps, que solo se activa cuando el padre causa un renderizado y no como resultado de un setStatelocal.

getSnapshotBeforeUpdate ()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() se invoca justo antes de que la salida renderizada más reciente se confirme, por ejemplo, en el DOM. Permite que su componente capture cierta información del DOM (por ejemplo, posición de desplazamiento) antes de que se cambie potencialmente. Cualquier valor devuelto por este ciclo de vida se pasará como parámetro a componentDidUpdate().

Este caso de uso no es común, pero puede ocurrir en UIs como un hilo de chat que necesita manejar la posición de desplazamiento de una manera especial.

Se debe devolver un valor de instantánea (o null).

Por ejemplo:

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}

En los ejemplos anteriores, es importante leer la propiedad scrollHeight en getSnapshotBeforeUpdate porque puede haber retrasos entre ciclos de vida de fase de «renderizado» (como render) y ciclos de vida de fase «commit» (como getSnapshotBeforeUpdate y componentDidUpdate).

Límites de error

Los límites de error son componentes de React que detectan errores de JavaScript en cualquier parte de su árbol de componentes secundarios, registran esos errores y muestran una interfaz de usuario de reserva en lugar del árbol de componentes que se bloqueó. Los límites de error detectan errores durante el renderizado, en los métodos de ciclo de vida y en los constructores de todo el árbol debajo de ellos.

Un componente de clase se convierte en un límite de error si define uno (o ambos) de los métodos de ciclo de vida static getDerivedStateFromError() o componentDidCatch(). Actualizar el estado de estos ciclos de vida le permite capturar un error de JavaScript no controlado en el siguiente árbol y mostrar una interfaz de usuario de reserva.

Solo use límites de error para recuperarse de excepciones inesperadas; no intente usarlos para controlar el flujo.

Para obtener más detalles, consulte Manejo de errores en React 16.

Nota

Los límites de error solo detectan errores en los componentes debajo de ellos en el árbol. Un límite de error no puede detectar un error dentro de sí mismo.

static getDerivedStateFromError ()

static getDerivedStateFromError(error)

Este ciclo de vida se invoca después de que un descendiente haya lanzado un error component.It recibe el error que se lanzó como parámetro y debe devolver un valor al estado de actualización.

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Nota

getDerivedStateFromError() se llama durante el «render» de la fase, así que los efectos secundarios no son permitidos.Para esos casos de uso, use componentDidCatch() en su lugar.

componentDidCatch()

componentDidCatch(error, info)

Este ciclo de vida se invoca después de que un error ha sido lanzada por un descendiente de los componentes.Recibe dos parámetros:

1. error El error que se produjo.
2. info – Un objeto con una tecla componentStack que contiene información sobre qué componente lanzó el error.

componentDidCatch() se llama durante la fase de «confirmación», por lo que los efectos secundarios son permitted.It debe usarse para cosas como errores de registro:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Las compilaciones de producción y desarrollo de React difieren ligeramente en la forma en quecomponentDidCatch() maneja los errores.

En desarrollo, los errores de la burbuja hasta window, esto significa que cualquier window.onerror o window.addEventListener('error', callback) va a interceptar los errores que han sido atrapados por el componentDidCatch().

En la producción, en cambio, los errores no se acumularán, lo que significa que cualquier controlador de errores de antepasado solo recibirá errores que no sean detectados explícitamente por componentDidCatch().

Nota

En caso de error, puede renderizar una interfaz de usuario de reserva con componentDidCatch() llamando a setState, pero esto quedará obsoleto en una versión futura.Use static getDerivedStateFromError() para manejar la representación de reserva en su lugar.

Métodos de ciclo de vida heredados

Los métodos de ciclo de vida siguientes están marcados como»heredados». Todavía funcionan, pero no recomendamos usarlos en el nuevo código. Puedes obtener más información sobre cómo migrar de métodos de ciclo de vida heredados en esta publicación de blog.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

Nota

Este ciclo de vida fue anteriormente con el nombre de componentWillMount. Ese nombre seguirá funcionando hasta la versión 17. Utilice el codemod rename-unsafe-lifecycles para actualizar automáticamente sus componentes.

UNSAFE_componentWillMount() se invoca justo antes de que se realice el montaje. Se llama antes de render(), por lo tanto, llamar a setState() de forma sincrónica en este método no activará una representación adicional. En general, recomendamos usar constructor() en su lugar para inicializar el estado.

Evite introducir efectos secundarios o suscripciones en este método. Para esos casos de uso, use componentDidMount() en su lugar.

Este es el único método de ciclo de vida que se llama en el renderizado del servidor.

UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

Nota

Este ciclo de vida fue anteriormente con el nombre de componentWillReceiveProps. Ese nombre seguirá funcionando hasta la versión 17. Utilice el codemod rename-unsafe-lifecycles para actualizar automáticamente sus componentes.

Nota:

El uso de este método de ciclo de vida a menudo genera errores e inconsistencias

• Si necesita realizar un efecto secundario (por ejemplo, obtención de datos o una animación) en respuesta a un cambio en los accesorios, use componentDidUpdate ciclo de vida en su lugar.
• Si usó componentWillReceiveProps para volver a calcular algunos datos solo cuando cambia una propiedad, use un ayudante de memoización en su lugar.
• Si utilizó componentWillReceiveProps para» restablecer»algún estado cuando cambia una propiedad, considere hacer un componente totalmente controlado o totalmente incontrolado con un key en su lugar.

Para otros casos de uso, siga las recomendaciones de esta publicación de blog sobre el estado derivado.

UNSAFE_componentWillReceiveProps() se invoca antes de que un componente montado reciba nuevos apoyos. Si necesita actualizar el estado en respuesta a cambios de prop (por ejemplo, para restablecerlo), puede comparar this.props y nextProps y realizar transiciones de estado utilizando this.setState() en este método.

Tenga en cuenta que si un componente padre hace que su componente se vuelva a renderizar, se llamará a este método incluso si las propiedades no han cambiado. Asegúrese de comparar los valores actual y siguiente si solo desea manejar los cambios.

React no llama a UNSAFE_componentWillReceiveProps() con accesorios iniciales durante el montaje. Solo llama a este método si algunas de las propiedades del componente pueden actualizarse. Llamar a this.setState() generalmente no activa UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

Nota

Este ciclo de vida fue anteriormente con el nombre de componentWillUpdate. Ese nombre seguirá funcionando hasta la versión 17. Utilice el codemod rename-unsafe-lifecycles para actualizar automáticamente sus componentes.

UNSAFE_componentWillUpdate() se invoca justo antes de renderizar cuando se reciben nuevos apoyos o estados. Utilice esto como una oportunidad para realizar la preparación antes de que se produzca una actualización. Este método no se llama para el renderizado inicial.

Tenga en cuenta que no puede llamar a this.setState() aquí; ni debe hacer nada más (por ejemplo, enviar una acción Redux) que active una actualización de un componente React antes de que UNSAFE_componentWillUpdate() regrese.

Normalmente, este método se puede reemplazar por componentDidUpdate(). Si estaba leyendo desde el DOM en este método (por ejemplo, para guardar una posición de desplazamiento), puede mover esa lógica a getSnapshotBeforeUpdate().

Nota

UNSAFE_componentWillUpdate() no va a ser invocada si shouldComponentUpdate() devuelve false.

Otras API

A diferencia de los métodos de ciclo de vida anteriores (que React llama por usted), los métodos a continuación son los métodos que puede llamar desde sus componentes.

Hay sólo dos de ellos: setState() y forceUpdate().

setState()

setState(updater, )

(state, props) => stateChange

this.setState((state, props) => { return {counter: state.counter + props.step};});

setState(stateChange)

this.setState({quantity: 2})

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

this.setState((state) => { return {quantity: state.quantity + 1};});

component.forceUpdate(callback)

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

 render() { return <CustomButton /> ; // props.color will be set to blue }

 render() { return <CustomButton color={null} /> ; // props.color will remain null }