1, el concepto de ciclo de vida
1.1, el concepto de
En los componentes para crear, propiedades de los componentes de actualización, el componente se destruye en el proceso, siempre acompañados por una variedad de funciones para realizar estos componentes en un período específico, activa la función realizada, se hace referencia colectivamente como una función del ciclo de vida de los componentes.
1.2, el ciclo de vida de los componentes en tres etapas
Cargando fase (de montaje): realizar la inicialización componente, hay una característica notable: Crear una función del ciclo de vida se ejecuta sólo una vez en toda la vida de montaje;
Actualización de la etapa (actualización): realizar una propiedad y cambia de estado de acuerdo con el cambio de los apoyos estatales y montaje, selectivo de activación 0 o más veces;
fase de descarga (Desmontando): ejecutado cuando el Component Object vida destruido ejecuta sólo una vez;
2, el ciclo de vida de edad
2,1, de montaje (fase de carga: se refiere función de enlace 6)
constructor()
Cuando se llama una vez cargado, puede ser estado inicializado
getDefaultProps ()
Establecer apoyos por defecto, también puede utilizar las propiedades predeterminadas dufaultProps el componente.
getInitialState ()
estado de inicialización, puede ser definida directamente en el constructor de this.state
componentWillMount ()
Sólo se llama cuando se carga el componente, después de la actualización de los componentes no se llama, todo el ciclo de vida llama sólo una vez, entonces se puede modificar el estado
hacer()
reaccionar pasos más importantes para crear un DOM virtual, eran árboles actualización del algoritmo dom diff en este
componentDidMount ()
Después de rendir llamadas componentes, llamadas sólo una vez
2.2, Actualización (fase de actualización: la participación de función 5 gancho)
componentWillReceivePorps (nextProps)
Cuando la llamada no se invoca cuando se carga el componente, el componente de aceptar los nuevos apoyos
shouldComponentUpdate (nextProps, del estado siguiente)
Se invoca cuando un componente recibe un nuevo puntales o estado, de vuelta verdad dom actualización (usando diff actualizaciones del algoritmo), el retorno actualizaciones para prevenir falsas (no llame rinden)
componentWillUpdata (nextProps, del estado siguiente)
No se llama cuando el componente se carga sólo cuando se le llama en el componente a ser actualizado, entonces se puede modificar el estado
hacer()
reaccionar pasos más importantes para crear un DOM virtual, eran árboles actualización del algoritmo dom diff en este
componentDidUpdate ()
No se llama cuando el componente se carga las actualizaciones de componentes después de la finalización de la llamada
2,3, Desmontando (fase de descarga: se refiere a una función de enlace)
componentWillUnmount ()
Después de rendir llamadas componentes, llamadas sólo una vez
2.4, el ciclo de vida de la muestra de código de función
import React, { Component } from 'react'
export default class OldReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
componentWillMount() { // 组件挂载前触发
}
render() {
return (
<h2>Old React.Component</h2>
)
}
componentDidMount() { // 组件挂载后触发
}
componentWillReceivePorps(nextProps) { // 接收到新的props时触发
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
componentWillUpdate(nextProps, nextState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}3, nuevo ciclo de vida
3,1, de montaje (fase de carga: 4 se refiere función de enlace)
constructor()
Cuando se llama una vez cargado, puede ser estado inicializado
getDerivedStateFromProps estáticos (apoyos, estado)
ReRender conjunto de cada momento en que, después del montaje construido comprende (después de la dom virtual, antes de la dom carga real), cada adquisición de un nuevo estado o después de los apoyos; después de cada apoyos recibidos serán devolver un nuevo objeto como un nuevo estado o nulos instrucciones necesarias para actualizar el estado; con componentDidUpdate, podrá extenderse a todas las componentWillReceiveProps de uso
hacer()
reaccionar pasos más importantes para crear un DOM virtual, eran árboles actualización del algoritmo dom diff en este
componentDidMount ()
Después de rendir llamadas componentes, llamadas sólo una vez
3.2, Actualización (fase de actualización: la participación de función 5 gancho)
getDerivedStateFromProps estáticos (apoyos, estado)
ReRender conjunto de cada momento en que, después del montaje construido comprende (después de la dom virtual, antes de la dom carga real), cada adquisición de un nuevo estado o después de los apoyos; después de cada apoyos recibidos serán devolver un nuevo objeto como un nuevo estado o nulos instrucciones necesarias para actualizar el estado; con componentDidUpdate, podrá extenderse a todas las componentWillReceiveProps de uso
shouldComponentUpdate (nextProps, del estado siguiente)
Se invoca cuando un componente recibe un nuevo puntales o estado, de vuelta verdad dom actualización (usando diff actualizaciones del algoritmo), el retorno actualizaciones para prevenir falsas (no llame rinden)
hacer()
reaccionar pasos más importantes para crear un DOM virtual, eran árboles actualización del algoritmo dom diff en este
getSnapshotBeforeUpdate (prevProps, prevState)
Tiempo de activación: tiempo de actualización se produjo después de que el render, antes de la prestación dom componente; devolver un valor, como tercer parámetro componentDidUpdate; con componentDidUpdate, puede cubrir toda el uso componentWillUpdate
componentDidUpdate ()
No se llama cuando el componente se carga las actualizaciones de componentes después de la finalización de la llamada
3,3, Desmontando (fase de descarga: se refiere a una función de enlace)
componentWillUnmount ()
Después de rendir llamadas componentes, llamadas sólo una vez
3,4, Error Handling (Tratamiento de errores)
componentDidCatch (error, info)
error javascript en cualquiera de los factores desencadenantes
3.5, la nueva función del ciclo de vida ejemplo de código
import React, { Component } from 'react'
export default class NewReactComponent extends Component {
constructor(props) {
super(props)
// getDefaultProps：接收初始props
// getInitialState：初始化state
}
state = {
}
static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state
return state
}
componentDidCatch(error, info) { // 获取到javascript错误
}
render() {
return (
<h2>New React.Component</h2>
)
}
componentDidMount() { // 挂载后
}
shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新
return true
}
getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发
}
componentDidUpdate() { // 组件更新后触发
}
componentWillUnmount() { // 组件卸载时触发
}
}4, resumen
El ciclo de vida de edad
ciclo de vida nueva
- React16 nuevo ciclo de vida abandonada
componentWillMount,componentWillReceivePorps,componentWillUpdate; - Agregado
getDerivedStateFromProps,getSnapshotBeforeUpdateen lugar de los tres función de enlace abandonadacomponentWillMount(componentWillReceivePorps,componentWillUpdate,); - React16 no elimina estas funciones tres gancho, pero no puede agregar una función de enlace (
getDerivedStateFromProps,)getSnapshotBeforeUpdatemezclar,React17se eliminaráncomponentWillMount,componentWillReceivePorps,componentWillUpdate; - Añadido manejo de errores (componentDidCatch)
