¿Cuál es el ciclo de vida de los componentes de ReactNative?
Esta vez les mostraré cuánto dura el ciclo de vida de los componentes de React Native y cuáles son las precauciones para el ciclo de vida de los componentes de React Native. El siguiente es un caso práctico, echemos un vistazo.
Aquí hay una introducción al ciclo de vida de los componentes de React Native para todos. Creo que será de gran ayuda para todos cuando utilicen los componentes de React Native. Si está interesado, echemos un vistazo.
Al igual que View en el desarrollo de Android, los componentes en React Native (RN) también tienen un ciclo de vida. El llamado ciclo de vida es el estado por el que pasa un objeto desde su creación inicial hasta su desaparición final. Comprender el ciclo de vida es la clave para el desarrollo racional. El ciclo de vida de los componentes de RN se organiza de la siguiente manera
Como se muestra en la figura, el ciclo de vida de los componentes se puede dividir aproximadamente en tres etapas:
La primera etapa: es la primera etapa de dibujo del componente, como se muestra en la figura En el cuadro de puntos superior de la figura, la carga y la inicialización del componente se completan aquí
La segunda etapa: el componente está en ejecución e interactivo; etapa, como se muestra en el cuadro de línea de puntos en la esquina inferior izquierda de la figura. En esta etapa, el componente puede procesar la interacción del usuario o recibir eventos para actualizar la interfaz;
La tercera etapa: es la. etapa en la que los componentes se desinstalan y destruyen, como se muestra en el cuadro de puntos en la esquina inferior derecha de la figura, donde se realiza parte del trabajo de limpieza de componentes.
Funciones de devolución de llamada del ciclo de vida
Presentemos en detalle cada función de devolución de llamada en el ciclo de vida.
getDefaultProps
Antes de crear el componente, se llamará primero a getDefaultProps(). Esta es una llamada global. Estrictamente hablando, esto no es parte del ciclo de vida del componente. Cuando se crea y carga un componente, primero se llama a getInitialState() para inicializar el estado del componente.
componenteWillMount
Luego, para preparar la carga del componente, se llamará a componenteWillMount(), y su prototipo es el siguiente:
void componenteWillMount()
Esto El momento de la llamada a la función es después de que se crea el componente y se inicializa el estado, pero antes de que se dibuje render() por primera vez. Puede realizar algunas operaciones de inicialización comercial aquí y también puede establecer el estado del componente. Esta función se llama solo una vez durante todo el ciclo de vida.
componenteDidMount
Después de dibujar el componente por primera vez, se llamará a componenteDidMount() para notificar que el componente se ha cargado. El prototipo de la función es el siguiente:
void componenteDidMount()
Cuando se llama a esta función, su DOM virtual ha sido construido y puedes comenzar a obtener sus elementos o subcomponentes en este función. Cabe señalar que el marco RN primero llama al componenteDidMount () del componente secundario y luego llama a la función del componente principal. A partir de esta función, puede interactuar con otros marcos JS, como configurar el tiempo setTimeout o setInterval, o iniciar solicitudes de red. Esta función también se llama solo una vez. Después de esta función, ingresa a un estado de ejecución estable y espera a que se active el evento.
componenteWillReceiveProps
Si el componente recibe nuevas propiedades (props), se llamará a componenteWillReceiveProps() y su prototipo es el siguiente:
void componenteWillReceiveProps(
objeto nextProps
)
El parámetro de entrada nextProps es la propiedad que se establecerá. Las propiedades antiguas aún se pueden obtener a través de this.props.
En esta función de devolución de llamada, puede actualizar el estado de su componente llamando a this.setState() en función de los cambios en las propiedades. Es seguro llamar al estado de actualización aquí y no activará llamadas render() adicionales. De la siguiente manera:
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
deberíaComponentUpdate
Cuando el componente recibe nuevas propiedades y cambios de estado, activará la llamada deberíaComponentUpdate(.. .), el prototipo de la función es el siguiente:
booleano deberíaComponentUpdate(
objeto nextProps, objeto nextState
)
Parámetro de entrada nextProps y la función componenteWillReceiveProps anterior. De manera similar, nextState representa el valor de estado del componente que está a punto de actualizarse. El valor de retorno de esta función determina si el componente necesita actualizarse. Si es verdadero, significa que se necesita una actualización y el proceso de actualización posterior continúa. De lo contrario, no se actualizará y entrará directamente en estado de espera.
De forma predeterminada, esta función siempre devuelve verdadero para garantizar que la interfaz de usuario se pueda actualizar sincrónicamente cuando cambian los datos. En proyectos grandes, puede sobrecargar esta función usted mismo y determinar si es necesario actualizar la interfaz de usuario verificando las propiedades y el estado antes y después del cambio, lo que puede mejorar efectivamente el rendimiento de la aplicación.
componenteWillUpdate
Si el estado o las propiedades del componente cambian y lo anterior deberíaComponentUpdate(...) devuelve verdadero, el componente se actualizará y componenteWillUpdate(), su función, será El prototipo llamado es el siguiente:
void componenteWillUpdate(
objeto nextProps, objeto nextState
)
Los parámetros de entrada son los. Al igual que deberíaComponentUpdate, en esta devolución de llamada, puede hacer algunas cosas antes de actualizar la interfaz. Es importante tener en cuenta que dentro de esta función, no puedes usar this.setState para modificar el estado. Después de llamar a esta función, nextProps y nextState se establecerán en this.props y this.state respectivamente. Inmediatamente después de esta función, se llamará a render() para actualizar la interfaz.
componenteDidUpdate
Después de llamar a render() para actualizar la interfaz, se llamará a componenteDidUpdate() para recibir notificación. El prototipo de la función es el siguiente:
void. componenteDidUpdate(
objeto prevProps, objeto prevState
)
Debido a que las propiedades y el estado se han actualizado aquí, los parámetros de entrada de esta función se convierten en prevProps y prevState.
componenteWillUnmount
Cuando se va a eliminar un componente de la interfaz, se llamará a componenteWillUnmount(). Su prototipo de función es el siguiente:
void componenteWillUnmount(. )
En esta función, puede realizar algunos trabajos de limpieza relacionados con los componentes, como cancelar temporizadores, solicitudes de red, etc.
Resumen
En este punto, se ha introducido la vida completa de los componentes de RN. Será más claro si miramos la imagen anterior. Resumamos las funciones de devolución de llamada de la vida. ciclo en la siguiente tabla:
Ciclo de vida
Número de llamadas
Si se puede utilizar setSate()
getDefaultProps
p>1 (llamado una vez globalmente)
No
getInitialState
1
No
componenteWillMount
1
Sí
renderizar
>=1
No
componenteDidMount
1
Sí
componenteWillReceiveProps
>=0
Sí
deberíaComponentUpdate
>=0
No
componenteWillUpdate
>=0
No
componenteDidUpdate
p>>=0
No
componenteWillUnmount
1
No
Creo que has dominado el método en el caso de este artículo. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!
Lectura recomendada: