El ciclo de vida de react se divide aproximadamente en tres etapas: creación de componentes, actualización de componentes y destrucción de componentes. Y solo los componentes de clase tienen funciones de enlace de ciclo de vida, los componentes de función no.
1. Creación de componentes:
La Figura 1 muestra la secuencia de ejecución de la función de gancho del ciclo de vida.
1.constructor ():
Este objeto de asignación de estado puede inicializar los datos.
Enlaza una instancia para el controlador de eventos.
constructor(props) {
super(props);
this.state = {
a: 10,
b: 100
};
this.changeName = this.changeName.bind(this);
}Se ejecuta solo una vez cuando se crea el componente y no se ejecutará posteriormente.
2.static getDerivedStateFromProps () ：
Esta función se utiliza para asignar valores iniciales al componente como subcomponente, y el componente puede modificar los datos en su propio estado.
Por lo general, se hace un juicio dentro de la función. Si el componente modifica los datos en su propio estado, los datos en los accesorios del componente principal no son necesarios.
Se llamará durante las fases de creación y actualización del componente.
No existe este puntero y hay dos parámetros: el primer parámetro son los datos en los accesorios del componente principal y el segundo parámetro son los datos en el estado del componente.
Debe devolver un objeto o un valor nulo. Si es un objeto, se fusionará con el estado de este componente.
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.b !== prevState.prevProps.b) {
return {
b: nextProps.b,
prevProps: { b: nextProps.b }
};
}else
return null;
}3.componentWillMount () || UNSAFE_componentWillMount () ：
Llamar a setState en esta función no activará una representación adicional. Pero esta función se puede implementar directamente en el constructor. Por tanto, esta función no tiene ningún significado y se encuentra básicamente en un estado obsoleto.
4.render () ：
La parte principal de la página de representación, que puede implementar algunas operaciones, pero debe devolver un objeto jsx.
El código central se llamará repetidamente, reduciendo el número de llamadas innecesarias a la función render () para lograr la optimización del rendimiento.
render() {
// 核心代码，会被反复调用
console.log("render函数运行了");
return (
<div>这是个人中心
<Child b ={this.state.b}></Child>
</div>
);
}5.componentDIdMount () ：
Se llamará después de que se monte el componente. El montaje de componentes es para insertar en el árbol de dom.
En esta función, generalmente se envían los datos dinámicos requeridos por el componente de solicitud ajax.
Llamar a setState aquí activará la función render ().
componentDidMount() {
// 组件挂载完毕
let listMain = await http("/category/list/0");
this.setState({ listMain });
this.changeCategory(listMain[0].id);
}2. Actualización de componentes:
Cómo activar la actualización de componentes:
1. Este componente llama a setState por sí mismo, activará el re-renderizado (re-renderizado).
2. El componente padre desencadena la re-renderización y el componente hijo se vuelve a renderizar.
3. El cambio de accesorios activará la reproducción de este componente.
1.componentWillReceiveProps () || UNSAFE_componentWillReceiveProps () ：
Este componente se llama cuando se actualiza el componente y se suele utilizar para: cuando cambia el valor de los props, hacer la operación correspondiente en esta función en respuesta al cambio del valor de los props.
Este componente ha quedado básicamente obsoleto. Puede realizar la operación correspondiente en componentDidUpdate.
2.static getDerivedStateFromProps () ：
La operación es la misma que cuando se creó el componente. Consulte Creación de componentes para obtener más detalles.
3.shouldComponentUpdate () ：
Esta función se utiliza principalmente para optimizar el rendimiento de reacr.
La función debe devolver explícitamente verdadero o falso.
Dos parámetros, el primer parámetro es nextProps: valor de props que está a punto de entrar en vigor, y el segundo parámetro es nextState: valor de estado que está a punto de entrar en vigor. Obtenga el valor actual de este puntero.
Escriba una lógica razonable para reducir las actualizaciones innecesarias. Si devuelve falso, no se ejecutará hacia abajo, lo que reduce el número de representaciones y optimiza el rendimiento.
shouldComponentUpdate(nextProps){
console.log("child组件的shouldComponentUpdate运行了");
return this.props.b !== nextProps.b;
}
// 如果不写默认返回trueEl código para la optimización del renderizado es el siguiente:
shouldComponentUpdate(nextProps){
let keys = Object.keys(nextProps);
for(let i = 0; i < keys.length; i++) {
if(this.props[keys[i]] !== nextProps[keys[i]] ) return true;
}
return false;
}Es equivalente a la función predeterminada shouldComponentUpdate () del componente de clase heredado de pureComponent de react.
import React, {PureComponent} from 'react';
class Child extends PureComponent {}PureComponent compara todas las propiedades de los accesorios y primero determina si el componente actual necesita volver a renderizarse.
Pero: PureComponent solo hace una simple "comparación superficial" de los valores de propiedad.
La comparación superficial está bien para los tipos de valor. Para los tipos de referencia, solo compara si sus direcciones en la memoria son las mismas y no realiza comparaciones de nivel profundo.
Si se pasa un tipo de referencia con una dirección diferente y el mismo contenido, PureComponent no puede realizar comparaciones en profundidad.
Caso de uso: cuando sabe que un componente es un componente de clase, y este componente de clase debe optimizarse para su rendimiento.
El mayor escollo: cuando un componente padre pasa datos de un tipo de referencia a un componente hijo, no se puede vincular directamente al pasar un valor. P.ej:
// 错误写法
<Child b ={this.state.b} changeName={this.changeName.bind(this)}></Child>
// 正确写法
changeName = () => {};
<Child b ={this.state.b} changeName={this.changeName}></Child>4.componentWillUpdate () || UNSAFE_componentWillUpdate () ：
Este método ha quedado obsoleto, puede utilizar componentDidUpdate () para reemplazar la función de esta función.
Si necesita leer la información de dom, puede usar getSnapshotBeforeUpdate en su lugar.
componentWillUpdate(){
// 基本废弃，一般不用了。改名了UNSAFE_componentWillUpdate
console.log("componentWillUpdate函数运行了");
}5.render () ：
En la renderización de la etapa de actualización, el nodo dom del componente se puede renderizar de acuerdo con los nuevos datos. El nodo dom se comparará con la última vez y descubrirá los diferentes nodos a modificar. No todos los nodos dom se vuelven a renderizar.
6.getSnapshotBeforeUpdate () ：
Generalmente, realice algunas operaciones de dom en esta función. Registre la posición de desplazamiento.
Por ejemplo: una página desplazable, después de una actualización repentina, debe registrar su posición en esta función y luego pasarla a la función componentDidUpdate (), puede volver a esa posición después de que finalice la actualización.
Hay dos parámetros: prevProps, prevState cuyo contenido es el mismo que el anterior.
Necesita devolver un valor devuelto
getSnapshotBeforeUpdate(prevProps, prevState){
return { y: 50 }
}
componentDidUpdate(prevProps, prevState, snapshot){
console.log(snapshot) // { y: 50 }
}7.componentDidUpdate ():
Esta función se ejecuta principalmente cuando se completa la actualización.
Hay dos parámetros: el primer parámetro es prevProps, el valor de props antes de la actualización y el segundo parámetro representa el valor en el estado antes de la actualización. El valor actual es this.props. El tercer parámetro son los datos pasados por getSnapshotBeforeUpdate ().
La implementación es similar a la supervisión del reloj en vue. Comparando los datos antes y después de la actualización.
Esta función indica que se ha actualizado el dom correspondiente al último estado, por lo que puede realizar algunas operaciones personalizadas en el último dom.
// 模拟vue中的watch监听
componentDidUpdate(prevProps,prevState) {
if(prevState.a !== this.state.a) {
console.log("a变量");
}
}
// 对最新的dom做些自定义操作
// 例如使用插件监听滚动3. Destrucción de componentes:
Los componentes que ya no se utilizan o que no se han utilizado durante mucho tiempo deben destruirse.
1.componentWillUnmount () ：
Esta función se utiliza principalmente para liberar espacio y recursos de memoria relacionados.
// 组件销毁
componentWillUnmount() {
// 释放当前组件相关的内存和资源
console.log("componentWillUnmount运行了")
}Lo anterior es la función de gancho del ciclo de vida en reaccionar, y se pueden realizar diferentes funciones a través de diferentes funciones.
La secuencia de ejecución de las funciones de enlace del ciclo de vida en los componentes padre e hijo es la siguiente:
Las funciones de construcción y representación del componente principal se ejecutan antes que el componente secundario, y el componentDidMount y el componentDidUpdate del componente secundario se ejecutan antes que el componente principal.