react / react/react

Use Inline Event Handlers for trapBubbledEventsLocal and the iOS Safari Click Hack

Abierto
#4,166 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: DOM React Core Team Type: Enhancement
Lenguaje dominante
JavaScript
Estrellas
251k
Forks
51.4k
Merge medio
2 d 4 h
PR fusionados (30 d)
53

Descripción

We currently do a lot of work at the end of mount to find all the nodes and attach listeners after the fact. This is severely impacting initial rendering performance of <form />, <img /> and click handlers.

Instead we can just use inline event handlers in the innerHTML string. For the iOS Safari hack it should be trivial. The handler doesn't even have to do anything.

The inline event handler would need to either redispatch the event, or call into some other event handler system. Probably a global listeners.

window._handleReactEvent = ...;
<img onload="_handleReactEvent(event)">

Since there could potentially be multiple Reacts, they should probably chain the handler if there already is one registered. (Although multiple Reacts in the same document is already pretty broken in this regard.)

It doesn't have to be a global. Since inline event handlers gets the element added as a with(element) scope around itself. It is equivalent to add it to the prototype:

Element.prototype._handleReactEvent = ...;

or

HTMLImgElement.prototype._handleReactEvent = ...;

This makes them a bit more hidden, unobtrusive.

We still need to render this string for server-side rendering to avoid needing to change the HTML or wire up handlers after-the-fact on the client.

Since these events can fire before React has loaded, we need to check for the existence of the handler before it is used.

<img onload="this._handleReactEvent&&_handleReactEvent(event)">

It is critical that this string is short - for innerHTML string concat performance and network performance. Yet it needs to be unlikely to collide with anything else.

Is there a unicode character we could use?

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

No se nombran archivos, pruebas ni puntos de entrada. Empieza por localizar el trabajo de los listeners durante el montaje para

, y los manejadores de clic, y después evalúa la ruta propuesta de manejadores inline para el renderizado del cliente y el renderizado del servidor; se considerará completado cuando se preserve el comportamiento de los eventos sin adjuntar listeners después del montaje y se gestionen tanto los manejadores ausentes como los existentes.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.