Primero busque y descargue la extensión en Extension Fan, e introdúzcala en el programa de extensión de Chrome.
Cuando agreguemos la extensión a Chrome, veremos el icono de React Devtools en el navegador, al mismo tiempo, a través de esta extensión, podemos saber si el sitio web actualmente abierto es un sitio web de entorno de desarrollo o un entorno de producción. se basará en diferentes entornos Mostrar diferentes iconos.
Si desea evitar que otros vean la información de su sitio web a través de Devtools después de que la implementación esté en línea, ejecute en el entorno de empaquetado:
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {for (const [key, value] of (Object).entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value === 'function' ? () => undefined : null;}
}
- De forma predeterminada, React Devtools, en el entorno de producción, estos datos no se pueden modificar, pero son visibles.
⚛️Components y ⚛️ Profiler son React Devtoolslas entradas de funciones de .
Descripción de la función del panel de componentes
En el Componentspanel podemos ver la estructura del componente y los datos correspondientes.
componente de posicionamiento
Cuando se introducen herramientas como bibliotecas de interfaz de usuario de terceros en el proyecto ReactRouter, Reduxel árbol de componentes se verá demasiado y es difícil para nosotros encontrar los componentes correspondientes y los datos vinculados por un tiempo. Si desea ubicar nuestro propio componente, puede buscar solo el nombre del componente en el cuadro de búsqueda y luego hacer doble clic en el componente, luego el árbol de componentes se verá más conciso y solo se mostrarán los componentes que usamos en el código y no aparecerán los componentes con niveles de anidamiento profundos.
filtrar
Los filtros pueden ayudarnos a filtrar fácilmente algunos componentes que no queremos mostrar, por ejemplo, filtrar <Spin>componentes.
componente de depuración
Busque el componente correspondiente en el panel de depuración y haga doble clic, los datos correspondientes al componente se listarán a la derecha, podemos observar los cambios de la página simplemente modificando los datos de la derecha.
información de depuración
Cada vez que hacemos clic en el debugbotón y luego cambiamos a la consoleconsola, encontraremos que la información de confianza del componente actual se ingresa en la consola.
Introducción al panel Perfilador
En la documentación oficial de React, se introduce Profiler APIagregar en cualquier parte del árbol de componentes de React para medir el costo de renderizar esta parte del árbol de componentes.
Por ejemplo, analicemos la sobrecarga antdde la <Table/>representación de componentes en .
<div className="App"><h1>Hello React.js</h1><Profiler id="Navigation"onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {}}><Table dataSource={users} columns={columns}/></Profiler>
</div>
<Profiler id="Navigation"onRender={(id, // 发生提交的 Profiler 树的 “id”phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一actualDuration,// 本次更新 committed 花费的渲染时间baseDuration,// 估计不使用 memoization 的情况下渲染整棵子树需要的时间startTime, // 本次更新中 React 开始渲染的时间commitTime,// 本次更新中 React committed 的时间interactions // 属于本次更新的 interactions 的集合 ) => {}}> <Table dataSource={users} columns={columns}/>
</Profiler>
A través del gráfico de llamas de este análisis de rendimiento, podemos ver los costos de representación de los componentes de la aplicación 13msy InternalTablelos costos de representación de los componentes 11.3ms.
Por fin
Organicé un conjunto de "Colección de entrevistas de fabricantes de front-end", que incluye HTML, CSS, JavaScript, HTTP, protocolo TCP, navegador, VUE, React, estructura de datos y algoritmos, un total de 201 preguntas de entrevistas, e hice una respuesta para cada pregunta Responde y analiza.
Amigos necesitados, pueden hacer clic en la tarjeta al final del artículo para recibir este documento y compartirlo gratis
Parte de la documentación muestra:
La longitud del artículo es limitada y el siguiente contenido no se mostrará uno por uno.
Amigos que lo necesitan, pueden hacer clic en la tarjeta a continuación para obtenerla gratis