React: Devtools V4: ¿Dónde están las actualizaciones destacadas?

El mismo problema aquí. Las actualizaciones destacadas se han ido.
Me preguntaba si uno tiene que usar Profiler ahora para rastrear actualizaciones.

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

La respuesta honesta es que no tuvimos tiempo para implementarlo y no lo consideramos lo suficientemente importante como para bloquear el lanzamiento de todas las demás funciones.

Sin embargo, hay razones más profundas por las que no estamos seguros de volver a agregarlo. Contribuye a la idea equivocada de que los re-renderizados por sí mismos son malos (no lo son si son baratos). Por lo tanto, la gente dedica tiempo a optimizar cosas inútiles y no detecta problemas de rendimiento reales.

Las nuevas DevTools incluyen un generador de perfiles que debería ayudarlo a encontrar problemas de rendimiento reales en su código. Entiendo el deseo de una forma súper liviana de encontrar renders adicionales, y tal vez agreguemos eso, pero primero tendremos que pensar más sobre cómo debería funcionar.

Editado para agregar comentarios en línea

Alguna discusión previa relacionada https://github.com/bvaughn/react-devtools-experimental/issues/244

Highlight Updates fue muy útil no tanto para solucionar problemas de rendimiento (el nuevo Profiler es mucho mejor en eso), sino para descubrir renders sorprendentes. Nos ha salvado innumerables veces, especialmente cuando se trabaja con Context, donde un cambio puede provocar que se vuelvan a renderizar en otras partes de la aplicación. Cuando trabaja en Profiler, tiende a concentrarse solo en una parte del árbol, por lo que las regresiones son fáciles de pasar por alto.

Entiendo las preocupaciones de @gaearon sobre dar una idea incorrecta, así que, ¿qué tal:

1. Elija el color del contorno según la duración del renderizado

Los renders baratos deben ser verdes, los renders costosos deben ser amarillos o rojos. O simplemente use exactamente los mismos colores que usa Profiler.

2. Variar la velocidad de desvanecimiento del contorno

La animación de desvanecimiento del contorno debe ser relativa a la duración del renderizado. Los renderizados rápidos deberían desvanecerse inmediatamente, los renderizados lentos deberían desvanecerse más lentamente.

3. Diferenciar las áreas repintadas

A veces usé Highlight Updates con Paint Flashing Chrome. Esto hizo que los renders que llevaban al repintado se resaltaran de manera diferente a los renders que no tenían efecto DOM. Creo que DevTools debería tener una función similar incorporada.

• Un renderizado costoso sin repintados debería ser el objetivo principal de las optimizaciones de rendimiento.
• Los renderizados que repintan obviamente están haciendo un trabajo que debe hacerse.
• Las renderizaciones rápidas que resultan en ningún repintado están bien para ignorar.

Tal vez incluso tenga una configuración que solo parpadee la primera de las anteriores (con algún umbral configurable).

Identificar un renderizado "barato" o "rápido" no es tan sencillo como parece, debido a factores como:

• Las compilaciones de desarrollo son mucho más lentas que las compilaciones de producción.
• Las laptops para desarrolladores son generalmente mucho más rápidas que las laptops para usuarios finales.

Lo bueno de Profiler es que informa la velocidad como relativa, lo que le permite concentrarse en la parte más lenta de una aplicación en cualquier sesión determinada. (Puedes decidir cuándo la parte más lenta es lo suficientemente rápida). Sin embargo, esto solo se puede hacer en retrospectiva.

También le brinda una instantánea estática de las confirmaciones y qué accesorios / estado cambió, lo que le permite ver no solo la frecuencia con la que se procesó un componente en particular (¿fue más de lo que esperaba?) Sino también específicamente _por qué_ se volvió a procesar y qué más. re-renderizado con él.

Creo que hay una buena posibilidad de que consideremos agregar algún tipo de mecanismo de actualización de actualización a DevTools como parte de Profiler. ¿Quizás parpadea (como solía hacerlo) solo cuando la creación de perfiles está activa? ¿Quizás muestre todos los componentes que se volvieron a renderizar cuando selecciona una nueva confirmación en el generador de perfiles después de que se haya detenido la generación de perfiles? (Me gusta esa idea, ya que te permite "reproducir" si te perdiste algo). Necesitamos experimentar un poco y ver qué funciona mejor.

Usé mucho esta función para asegurarme de que solo se procesaran los componentes que deberían renderizarse. Tengo una aplicación que procesa el mismo componente, muchas veces, con diferentes ID, y me gusta asegurarme de que solo se procese el que necesita volver a procesar, en lugar de todos. No veo una forma de verificar esto con el nuevo generador de perfiles.

No veo una forma de verificar esto con el nuevo generador de perfiles

¿Qué has probado? El generador de perfiles debe mostrar claramente si un niño está repitiendo o muchos.

Estaba usando "Actualizaciones destacadas" con frecuencia. Fue la característica de las herramientas de desarrollo que más utilicé. Solo para ver qué se actualizó, no con qué frecuencia. Claro, puede usar el generador de perfiles para hacer esto, pero eso es considerablemente más engorroso que tener una indicación visual rápida.

Para mí, "Destacar actualizaciones" fue la "característica principal" ...

Te escuchamos :-) No creo que más comentarios que solo digan "Usé esto" vayan a ayudar significativamente en este hilo, por lo que vale. Sabemos que hay personas que utilizan esta función y estamos pensando cuál sería la forma correcta de recuperarla. ¡Gracias por la retroalimentación!

Esta opción fue un componente esencial para mi proceso de trabajo diario para indicar un problema de reproducción al instante. Así que me alegraría mucho que pudieras traer de vuelta esta fantástica función pronto.

+1 al traer de vuelta alguna versión de esta función que permite una vista rápida de alto nivel de las re-renderizaciones (incluso para re-renderizaciones que están totalmente bien, como cuando actualizamos Context).

+1 al traer de vuelta

Así que me alegraría mucho que pudieras traer de vuelta esta fantástica función pronto.

Como se solicitó anteriormente:

No creo que más comentarios que solo digan "Usé esto" vayan a ayudar significativamente

Para reformular esto de manera más explícita:

¡Te oimos!

Hay muchas personas suscritas a este repositorio. No queremos enviarles spam con los mismos comentarios cada pocas horas. Además, utilizamos personalmente las notificaciones de GitHub. Si este hilo recibe un golpe todos los días con un "+1", eventualmente tendremos que cancelar la suscripción para reducir el ruido. Lo que probablemente sea lo opuesto a tu intención.

Antes de comentar, asegúrese de agregar algo que no se haya dicho antes. Si ves un comentario similar a lo que querías escribir, solo agrega una reacción 👍.

Gracias por entender.
Agradecemos sus comentarios, pero son suficientes para ayudar a priorizar las tareas.

que está agregando algo que no se dijo antes.

Me gustaría preguntar, ¿hay alguna forma de instalar la versión anterior de la extensión? En realidad, la actualización rompió el flujo, como solía hacerlo. Desafortunadamente, el mercado de extensiones de Chrome no le permite instalar la versión anterior como 'npm'. ¿Tiene un enlace con extensión compilada? Gracias.
_ (Intenté instalar la versión independiente, pero este enlace del repositorio v3 está roto, el enlace a la extensión Crome conduce a la versión más reciente) _

Las nuevas DevTools incluyen un generador de perfiles que debería ayudarlo a encontrar problemas de rendimiento reales en su código.

Y aquí hay una respuesta, por qué la nueva extensión interrumpió mi flujo. Profiler lo alienta a presionar los botones para comenzar y luego para finalizar la creación de perfiles, pero no es instantáneo. Con el resaltador de actualizaciones, puedes ver todo sin movimientos adicionales. También le muestra de una manera muy intuitiva las actualizaciones reales y lo que realmente se ha activado.

Esto me recuerda al propio monitor de rendimiento de Chrome DevTools, que también solía actualizarse en vivo y luego algún día se migró a presionar para grabar. Ese movimiento probablemente tenía sentido debido a la complejidad y el impacto en el rendimiento, pero el punto es que agrega una fricción enorme (como señala @Carduelis , es mucho más fácil no presionar los botones de inicio / parada). Lanza una llave en el bucle OODA , y sin duda afectará la frecuencia con la que los usuarios usan esta función y, a su vez, afectará la calidad de la aplicación en sí.

No lo tome a mal: el nuevo monitor de rendimiento es genial y tiene sus usos cuando necesita profundizar, pero no puede simplemente reemplazar las visualizaciones rápidas y sucias como el resaltado de actualización anterior.

Me gustaría preguntar, ¿hay alguna forma de instalar la versión anterior de la extensión?

Las instrucciones de instalación de @Carduelis para la versión anterior de DevTools se tratan en la publicación del blog de lanzamiento: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get- la-vieja-version-back

Corrí en círculos un poco tratando de instalar v3 en Chrome siguiendo las instrucciones anteriores, y simplemente no pude hacer que el generador de perfiles independiente resaltara los cambios. Así que hice instrucciones detalladas paso a paso si solo desea que funcione y volver a optimizar sus componentes:

Instalación de React Dev Tools V3 (instrucciones paso a paso) :
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

Si puedo despotricar un poco, aunque en un nivel técnico puede parecer "herramientas de creación de perfiles en profundidad"> "una función de resaltado tonta", todos somos solo humanos y recopilamos mucha información rápidamente a partir de simples señales visuales, por lo que de alguna manera, la función de resaltado es muy importante, exactamente por la razón de que es tan fácil de usar. Para mí, es la razón por la que abro React Dev Tools el 90% del tiempo.

Si puedo despotricar un poco, aunque en un nivel técnico puede parecer "herramientas de creación de perfiles en profundidad"> "una función de resaltado tonta", todos somos solo humanos y recopilamos mucha información rápidamente a partir de simples señales visuales, por lo que de alguna manera, la función de resaltado es muy importante, exactamente por la razón de que es tan fácil de usar.

No creo que Dan o yo hayamos debatido que es "más fácil de usar", solo que podría animar a las personas a invertir tiempo en "arreglar" las cosas que no están "rotas" (también conocido como optimizar demasiado las cosas que no son lentas). . Hemos visto este patrón antes con cosas como la evitación generalizada de funciones en línea debido a los temidos costos de "rendimiento". La energía que se invierte en solucionar problemas que no son problemas es energía que no se gasta en arreglar otras cosas potencialmente más importantes.

Como dijimos anteriormente , creo que hay una buena posibilidad de que agreguemos algún tipo de mecanismo de actualización de actualización a DevTools como parte de Profiler.

Sin embargo, de manera realista, no es la cosa de mayor prioridad en mi plato, así que voy a pedir paciencia en lugar de repetir esta conversación. Escuchamos y reconocemos que esta característica es importante. Intentaremos sopesar la conveniencia con las otras consideraciones mencionadas anteriormente y llegar a algo más de lo que tenemos actualmente.

Hasta el punto de sobreoptimizar, puedo dar fe de que el resaltado de renderizado visual puede fomentar eso. Por lo tanto, me gustaría agregar algo a la discusión aquí.

Para aquellos que se pierden la función, pueden encontrar https://github.com/welldone-software/why-did-you-render más informativo.

Esto puede ser algo a considerar cuando se implemente esta función. De forma predeterminada, WhyDidYouRender hace una comparación de valores profunda y solo informa cuando las cosas no cambiaron entre las nuevas renderizaciones. Sería genial tener este mismo filtrado en los aspectos más destacados del renderizado visual. Esto dirigiría optimizaciones más reflexivas (además, es una distinción que no ofrece el generador de perfiles).

En teoría, debería ser posible volver a renderizar toda la aplicación sin problemas de rendimiento, por lo que agregar SCU en todas partes para evitar ver el resaltado del renderizado es un camino contraproducente.

Todavía encontré el resaltado de rerenderización útil para demostraciones sobre cómo funciona React.

De forma predeterminada, WhyDidYouRender hace una comparación de valores profunda y solo informa cuando las cosas no cambiaron entre las nuevas renderizaciones.

Esto suena muy lento para aplicaciones que realmente tienen problemas de rendimiento. Ciertamente, cualquier tipo de comparación profunda no es algo que nos gustaría hacer siempre. En el momento en que lo enciende (para optar por un rendimiento más lento), ¿por qué no simplemente iniciar Profiler?

Esto dirigiría optimizaciones más reflexivas (además, es una distinción que no ofrece el generador de perfiles).

Profiler proporciona una versión de esto:

Si ve un componente que se volvió a renderizar, pero no cambió ningún accesorio / estado / gancho, eso es lo que está describiendo, creo.

@bvaughn Bueno, por lo general, solo
Eso es bastante hábil y súper útil, pero es algo en lo que tienes que investigar.

@bvaughn Me encanta el "¿Por qué se renderizó esto?" característica (mientras tanto, mientras que Highlight Updates se vuelve a pensar), pero después de leer toda la documentación disponible y hojear su tutorial de YouTube, todavía no estoy seguro de cómo interpretarlo en algunos casos:

No es intuitivo lo que significa el subrayado:

¿Por qué hizo esto?

• accesorios cambiados: (__)

Solo uso la API de hooks, pero aún no estoy seguro del significado:

¿Por qué hizo esto?

• Ganchos cambiados

¿Alguna posibilidad de que haya una oración o dos explicaciones para estos casos y tal vez otros que aún no he encontrado además del caso obvio en el que se enumeran los props / state reales que cambiaron?

No es intuitivo lo que significa el subrayado:

Parece que algo en su aplicación está pasando un accesorio llamado __ y ese accesorio está cambiando entre confirmaciones 😄

Solo uso la API de hooks, pero aún no estoy seguro del significado

Consulte el n. ° 16477

Hola

Usaba mucho las actualizaciones destacadas. Estoy desarrollando una aplicación que se actualiza con frecuencia y ese futuro era esencial para mi trabajo diario.

Obtengo la solución que presentó @bvaughn . Es muy útil, pero no puedo aplicarlo a mi escenario debido a la frecuencia de actualización. Necesito una indicación rápida en lugar de una herramienta de creación de perfiles, que se ve increíble por cierto.

¿Todavía vas a implementar esto de nuevo? Si no, ¿cómo puedo degradar mis React Dev Tools, porque simplemente no puedo desarrollar sin ellas?

¿Todavía vas a implementar esto de nuevo? Si no, ¿cómo puedo degradar mis React Dev Tools, porque simplemente no puedo desarrollar sin ellas?

Ya respondido por @oztune.

¿Cómo recupero la versión anterior?
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the-old-version-back

Quiero la versión anterior de vuelta, por favor. Hay tanta funcionalidad que se perdió en el nuevo y es increíblemente inútil

Quiero la versión anterior de vuelta, por favor. Hay tanta funcionalidad que se perdió en el nuevo y es increíblemente inútil

He aquí cómo recuperar la versión anterior, funcionó para mí:
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

Hola @einarq, de hecho, me encantaría que faltaran funciones en la nueva versión. Veo muchas cosas nuevas y agradables, pero algunas de las antiguas son cruciales y no las entiendo de la forma en que se eliminaron. Para comprobar los reproductores ahora, puse un registro de la consola en la función de renderizado para detectar si estoy reduciendo un número de reproductores o no. No es ideal pero funciona. La versión anterior estaba haciendo que esto fuera ridículamente fácil y útil porque también me muestra otras reproducciones innecesarias que pude detectar. Ahora, esto es simplemente doloroso.

Vuelva a colocar las funciones que faltan en la nueva versión.

En mi palabra, nueva Versión significa que tiene: rediseño y mejoras de la anterior y nuevos futuros agregados. No eliminada y agregada nueva funcionalidad que es diferente a la anterior.

Además, ¿por qué ahora no puedo cambiar los valores de estado?

¿Y los booleanos de utilería ya no son casillas de verificación? Eso fue genial. Y de nuevo se fue.

Ahora el estado no se puede cambiar y los accesorios tengo que escribir falso / verdadero en su lugar, simplemente haga clic y vea cómo un componente está reaccionando a esto.

Súper molesto.

Hola @PMustard ,

No trabajo en esto, solo estaba sugiriendo un enfoque potencial para recuperar la versión anterior de las herramientas de desarrollo si no le gusta la nueva. Funcionó para mí.

Estoy seguro de que el equipo que trabaja en las herramientas de desarrollo (principalmente Brian Vaughn, ¿supongo?) Tomará en consideración sus inquietudes si crea algunos problemas separados para ellos.

Y no olvide mostrar su agradecimiento también. Obtenemos estas herramientas de forma gratuita :)
Solo retroalimentación constructiva.

Saludos,

Einar

Si necesita esta función con urgencia, puede utilizar una versión anterior como solución alternativa: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -versión-antigua-trasera. También te animo a que pruebes a usar Profiler. Aunque su ejecución requiere un poco más de esfuerzo, le indica qué re-renderizaciones son importantes y cuáles no. El simple hecho de contar los números de renderizado suele ser una distracción de los problemas de rendimiento reales.

Entendemos que es valioso disponer de una forma sencilla de detectar reproducciones inesperadas. Hemos explicado en https://github.com/facebook/react/issues/16437#issuecomment -523629000 que esto está en nuestro radar y que más comentarios que digan "Necesito esto" no son útiles. Dado que este hilo, sin embargo, ha continuado recopilando comentarios de "Necesito esto", lo bloquearé para reducir la inundación de notificaciones. Tenga la seguridad de que se escuchará su voz.

Implementé esta función en las nuevas DevTools (# 16989) con las siguientes advertencias:

• Solo está habilitado en la extensión del navegador (y el paquete react-devtools-inline NPM) por ahora, por lo que solo es compatible con React DOM.
• No está implementado para renderizadores heredados (v15), aunque alguien podría agregarlo si quisiera enviar un PR de seguimiento.

Cerrando este problema ahora que el # 16989 está aterrizando. Probablemente lanzará 4.2 con la nueva característica hoy.