Rastree por qué un componente de React se vuelve a renderizar
¿Existe un enfoque sistemático para depurar qué está provocando que un componente se vuelva a representar en React? Puse un simple console.log() para ver cuántas veces se procesa, pero tengo problemas para determinar qué está causando que el componente se represente varias veces, es decir, (4 veces) en mi caso. ¿Existe alguna herramienta que muestre una línea de tiempo y/o el orden y el renderizado del árbol de todos los componentes?
Si quieres un fragmento breve sin dependencias externas, esto me resulta útil.
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
Aquí hay un pequeño gancho que uso para rastrear actualizaciones de componentes funcionales.
function useTraceUpdate(props) {
const prev = useRef(props);
useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v];
}
return ps;
}, {});
if (Object.keys(changedProps).length > 0) {
console.log('Changed props:', changedProps);
}
prev.current = props;
});
}
// Usage
function MyComponent(props) {
useTraceUpdate(props);
return <div>{props.children}</div>;
}
Puede verificar el motivo del (re)renderizado de un componente con la herramienta de generación de perfiles React Devtools. No es necesario cambiar el código. Consulte la publicación del blog del equipo de reacción Presentación de React Profiler .
Primero, vaya al engranaje de configuración > generador de perfiles y seleccione "Registrar por qué se renderizó cada componente".
A continuación se muestran algunos casos en los que un componente de React se volverá a representar.
- Representación del componente principal
- Llamando
this.setState()dentro del componente. Esto activará los siguientes métodos del ciclo de vida del componenteshouldComponentUpdate>componentWillUpdate>render>componentDidUpdate - Cambios en los componentes
props. Esto activarácomponentWillReceiveProps>shouldComponentUpdate>componentWillUpdate>render>componentDidUpdate(connectmétodo dereact-reduxactivar esto cuando haya cambios aplicables en la tienda Redux) - llamada
this.forceUpdateque es similar athis.setState
Puede minimizar la reproducción de su componente implementando una verificación dentro de su shouldComponentUpdatey regresando falsesi no es necesario.
Otra forma es utilizar React.PureComponent componentes sin estado. Los componentes puros y sin estado solo se vuelven a representar cuando hay cambios en sus accesorios.
