Share
Reaccionar componentes encapsular partes de la interfaz de usuario. La IU completa de la aplicación React se representa como un árbol de muchos componentes anidados. Dependiendo del flujo de las aplicaciones, los componentes individuales deben realizar algunas tareas antes y después de la representación, así como antes y después de la actualización.
Finalmente, la limpieza y el manejo de errores también son importantes. React proporciona una gran cantidad de métodos de ciclo de vida que puede anular e inyectar su propia lógica en el lugar correcto. En este tutorial, aprenderá sobre el ciclo de vida de un componente React desde la cuna hasta la tumba, qué métodos están disponibles en cada etapa y cuándo es apropiado anularlos..
Tenga en cuenta que uso el estilo de clases ES6 moderno en este tutorial.
Usaré un componente llamado PopularBar para ilustrar todos los métodos del ciclo de vida y cómo se comportan. El código fuente completo está disponible en GitLab.
La barra popular contiene otros dos componentes llamados ClickCounter. Cada ClickCounter el componente contiene un botón con un emoji y muestra la cantidad de veces que se hizo clic agregado a la propiedad de conteo que recibe de su host. Aquí está el hacer() método de ClickCounter:
Accentsconagua
render () return ( deje clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> this.getTotal () < 100 ? this.getTotal() : "99+" ); El componente PopularBar representa dos componentes de ClickCounter con emojis de pulgar hacia arriba y hacia abajo. Tenga en cuenta que si el prop "show" es falso, muestra un div vacío. Esto será importante más adelante cuando discutamos el montaje y desmontaje..
render () if (! this.props.show) return () regreso ()
Los componentes de React existen cuando son procesados por un componente principal o por la aplicación raíz. Pero antes de poder representar un componente, es necesario construirlo (solo una vez) y montarlo en el DOM virtual (cada vez que se agrega al DOM virtual).
El orden de los eventos es que primero se construye el componente, luego el componentWillMount () se llama el método, el componente se monta en el DOM virtual, y luego el componentDidMount ()se llama. Eso le da muchas oportunidades para realizar diferentes tipos de inicialización.
Se llamará al constructor de un componente una vez por aplicación (si actualiza la página en su navegador, se considerará una nueva aplicación). Aquí está el constructor para el componente PopularBar. Realmente no hace nada excepto llamar súper(), que se requiere, y loguearse en la consola.
la clase PopularBar extiende el Componente constructor () super () console.log ('--- ¡El constructor PopularBar está aquí!')El constructor para ClickCounter inicializa su clickCount estado a cero:
la clase ClickCounter extiende el Componente constructor (props) super (props) this.state = clickCount: 0 console.log (props.emoji + '=== El constructor ClickCounter está aquí!')
Este es un ejemplo perfecto de una inicialización que debe hacerse una vez por aplicación. Si un componente ClickCounter se monta varias veces, debe conservar su número de clics.
los componentWillMount () Se llama al método antes de montar el componente, por lo que todavía no hay ningún componente. En general, no hay mucho que se pueda hacer en esta etapa, a menos que tenga una inicialización especial que suceda cada vez que se monte el componente, pero incluso eso puede esperar hasta el final. componentDidMount ()método.
Aquí están las implementaciones de métodos para PopularBar y ClickCounter:
// PopularBar componentWillMount () console.log ('--- PopularBar se montará. ¡Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter se montará. Yay ! ') Puedes llamar this.setState () aqui si tu quieres Los accesorios obviamente no son accesibles..
Aquí, el componente ya está montado, y puede realizar cualquier trabajo que necesite acceder al componente en el contexto del DOM virtual. Aquí están las implementaciones de métodos para PopularBar y ClickCounter. El componente ya existe, por lo que se puede acceder y mostrar sus propiedades (props).
componentDidMount () console.log ('--- PopularBar se montó. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter componentDidMount () console.log this.props.emoji + '=== ClickCounter se montó. count:' + this.props.count) Para resumir la sección de montaje, veamos el orden de los eventos en PopularBar y los dos componentes de ClickCounter que contiene. Para su comodidad, muestro los emoji para cada ClickCounter, para que puedan distinguirse.
--- ¡El constructor de PopularBar está aquí! --- PopularBar se montará. ¡Hurra! 👍 === ClickCounter constructor está aquí! 👍 === ClickCounter se montará. ¡Hurra! 👎 === ClickCounter constructor está aquí! 👎 === ClickCounter se montará. ¡Hurra! 👍 === ClickCounter se montó. count: 5 👎 === ClickCounter se montó. cuenta: 8 --- PopularBar se montó. upCount: 5, downCount: 8
En primer lugar, se construye el PopularBar y su componentWillMount () se llama metodo Entonces, el constructor y componentWillMount () Se llaman los métodos de cada componente de ClickCounter, seguidos por el componentDidMount () Llama a los dos componentes de ClickCounter. Finalmente, el componentDidMount () Se llama método de PopularBar. En general, el flujo está anidado donde todos los subcomponentes deben estar completamente montados antes de que su componente que contiene esté completamente montado.
Una vez que se monta el componente, se puede renderizar. De vez en cuando, el estado del componente o los accesorios que recibe de su contenedor puede cambiar. Dichos cambios conducen a una nueva representación, pero el componente tiene la oportunidad de ser notificado e incluso controlar si la representación debe ocurrir o no..
Hay cuatro métodos involucrados en el proceso de actualización, y los cubriré en orden.
los componentWillReceiveProps () Se llama al método cuando se reciben nuevos accesorios del contenedor. Usted tiene acceso a los accesorios actuales a través de esto.props y para los próximos accesorios a través de la nextProps parámetro. Aquí está el componentWillReceiveProps () método de ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter recibirá props.' + 'next props:' + nextProps.count)
Aquí tiene la oportunidad de comprobar qué accesorios han cambiado y modificar el estado del componente si lo desea. Esta bien llamar this.setState () aquí.
los shouldComponentUpdate () Es un método clave. Se llama cuando se reciben nuevos accesorios (después de componentWillReceiveProps () se llama) o después de que el estado del componente se modifique en otra parte. Si no implementas este método, el componente se volverá a generar cada vez que.
Pero si lo implementa y devuelve 'falso', entonces el componente y sus componentes secundarios no se procesarán. Tenga en cuenta que si se modifica el estado de los componentes secundarios, estos se volverán a representar incluso si siempre devuelve 'falso' desde los padres. shouldComponentUpdate ().
Obtiene acceso aquí a los próximos accesorios y al siguiente estado, por lo que tiene toda la información necesaria para tomar una decisión. El componente ClickCounter muestra 99+ cuando su conteo excede de 99, por lo que necesita actualizarse solo si el conteo es inferior a 100. Aquí está el código:
shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () let shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
los componentWillUpdateMethod () Se llama después del componente shouldComponentUpdate () sólo si shouldComponentUpdate () devuelto verdad En este punto, tienes los siguientes accesorios y el siguiente estado. No puedes modificar el estado aquí porque causará shouldComponentUpdate () ser llamado de nuevo.
Aquí está el código:
componentWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter actualizará' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount))
Finalmente, después de la prestación, el componentDidUpdate () se llama metodo Esta bien llamar this.setState () aquí porque la representación para el cambio de estado anterior ya se ha completado.
Aquí está el código:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter se actualizó')
Veamos los métodos de actualización en acción. Voy a causar dos tipos de actualizaciones. Primero, haré clic en el botón hacia arriba para activar un cambio de estado:
--- ¡El constructor de PopularBar está aquí! PopularBar.js: 10 --- PopularBar se montará. ¡Hurra! PopularBar.js: 14 👍 === ¡El constructor ClickCounter está aquí! 👍 === ClickCounter se montará. ¡Hurra! 👎 === ClickCounter constructor está aquí! 👎 === ClickCounter se montará. ¡Hurra! 👍 === ClickCounter se montó. recuento: 5 ClickCounter.js: 20 👎 === ClickCounter se montó. count: 8 ClickCounter.js: 20 --- PopularBar se montó. upCount: 5, downCount: 8 👍 === ClickCounter debe actualizar 👍 === ClickCounter actualizará nextProps.count: 5 nextState.clickCount: 1 👍 === ClickCounter se actualizó
Tenga en cuenta que el nextState.clickCount es 1, lo que desencadena el ciclo de actualización. La próxima actualización será causada por el padre que pasa nuevos accesorios. Para facilitar esto, agregaré una pequeña función que se activa cada 5 segundos e incrementa el conteo en 20. Aquí está el código en el componente principal de la aplicación que contiene la Barra Popular. El cambio se propagará hasta el ClickCounter.
class App extiende Component constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 ); everyFiveSeconds () let state = this.state state.upCount + = 20 this.setState (state)
Aquí está la salida. Tenga en cuenta que el ClickCounter willReceiveProps () método ha sido llamado y el nextState.clickCount permanece en cero, pero nextProps.Count ahora tiene 25 años.
--- ¡El constructor de PopularBar está aquí! --- PopularBar se montará. ¡Hurra! 👍 === ClickCounter constructor está aquí! 👍 === ClickCounter se montará. ¡Hurra! 👎 === ClickCounter constructor está aquí! 👎 === ClickCounter se montará. ¡Hurra! 👍 === ClickCounter se montó. count: 5 👎 === ClickCounter se montó. cuenta: 8 --- PopularBar se montó. upCount: 5, downCount: 8 👍 === ClickCounter recibirá accesorios. accesorios siguientes: 25 === ClickCounter debe actualizar 👍 === ClickCounter actualizará nextProps.count: 25 nextState.clickCount: 0
Los componentes se pueden desmontar y volver a montar, y puede haber errores durante el ciclo de vida de un componente.
Si un componente no es representado por su contenedor, se desmonta del DOM virtual y del componente desmontado componentWillUnmount () se llama metodo El PopularBar no representará sus subcomponentes de ClickCounter si el prop de show es falso. El componente de la aplicación representa la Barra Popular y pasa la función de demostración basada en la casilla de verificación.
Aquí está la aplicación hacer() método:
render () return ()Bar Popular
Cuando el usuario deselecciona la casilla de verificación, la Barra Popular aún se procesa, pero no procesa sus componentes secundarios, que se desmontan. Aquí está el código y la salida:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter desmontará :-(') Salida: 👍 === ClickCounter desmontará :-( 👎 === ClickCounter desmontará :-( No hay componentDidUnmount () Método porque no hay componente en este punto.
los componentDidCatch () el método se agregó recientemente en React 16. Está diseñado para ayudar con un error durante el procesamiento que anteriormente dio como resultado mensajes de error oscuros. Ahora, es posible definir componentes de límite de error especiales que envuelvan cualquier componente secundario que pueda generar errores, y el componente de límite de error se procesará solo si ocurrió el error.
Los componentes de React tienen un ciclo de vida bien definido, y los métodos especiales le permiten interponer su lógica y realizar acciones, controlar el estado en un nivel muy preciso e incluso manejar errores.
La mayoría de las veces esto no es obligatorio, y puede simplemente pasar los apoyos e implementar los hacer() método, pero es bueno saber que en circunstancias más especializadas no se quedará mirando una caja negra.
En los últimos años, React ha crecido en popularidad. De hecho, tenemos una serie de artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si busca recursos adicionales en React, no dude en consultarlos..
