Marco - Pregunta de la entrevista 8 - Principio de vinculación de eventos React

En React, el enlace de eventos adopta el método de denominación de joroba, no DOMel método de denominación de letras minúsculas en el elemento, por ejemplo: onclickpara escribirse como onClick, onchangepara escribirse como, onChangeetc.

ReactLos eventos vinculados no son eventos nativos, sino eventos sintetizados por eventos nativos React, por ejemplo: clicklos eventos se sintetizan en onClickeventos, blur, change, input, keydown, keyupetc. se sintetizan en onChange, Reactel motivo de esto es eliminar las diferencias entre diferentes navegadores

ReactEl principio de funcionamiento del evento se divide principalmente en los siguientes pasos

[1] Recopilar detectores de eventos: Reactlos detectores de eventos se recopilarán en una matriz, incluido el detector del elemento de destino y el detector del elemento raíz.

[2] Obtener todos los eventos: Reacttodos los nombres de eventos se procesarán en domEventNamey reactEventName, es decir, la relación correspondiente entre reactnombres de eventos y nombres de eventosdom

ReactRecorrerá simpleEventPluginEventsla lista y procesará el nombre del evento en domEventNamesum reactEventName, por ejemplo: clickevento corresponde a onClickevento

Hay un total de 75 relaciones de mapeo, registationNameDependenciesque almacenan reactla relación entre los nombres de los eventos y los nombres de los eventos dependientes, por ejemplo: onClicklos eventos dependen de clicklos eventos

[3] Tratamiento especial: Para onDoubleClicklos tres eventos onFocusde y onBlur, sus reactEventNamecorrespondencias son domEventNamediferentes, por lo que se requiere un tratamiento especial

[4]. Recopilación de eventos sintéticos: los objetos Reactse eventprocesarán en eventos sintéticos. Para eliminar las diferencias entre los diferentes navegadores, Reactse ha diseñado una función normalizepara eventprocesar objetos en eventos sintéticos.

Si normalizeexiste, significa que propNameel atributo correspondiente es una función en el evento sintético, de lo contrario, propNameel atributo correspondiente es un evento nativo.

En React v17, Reactel manejo de eventos no se agrega a documentlo anterior, pero el manejo de eventos se agrega al contenedor raíz Reactdel árbol de representaciónDOM

const rootNode = document.getElementById('root');
ReactDOM.render(<App />,rootNode);

En React16versiones anteriores, Reactla mayoría de los eventos se operarán document.addEventListener()y React V17se reemplazarán rootNode.addEventListener()llamando

En resumen, Reactel principio del enlace de eventos es encapsular eventos nativos del navegador (como click, keyupetc.) en un grupo de eventos confiable entre navegadores mediante el uso de eventos sintéticos.

Escuche estos eventos sintéticos en Reactsus componentes mediante el uso de controladores de eventos. ReactAlgunas estrategias de optimización se utilizan para mejorar el rendimiento y la eficiencia del enlace de eventos.

Por ejemplo, Reactlos enlaces de eventos se destruyen automáticamente cuando se desmonta el componente. Además, Reacttambién se admiten algunas funciones avanzadas, como la delegación de eventos, la delegación de eventos, la captura y el burbujeo, etc.

La información sobre el evento se puede eventobtener a través del objeto, como el tipo de evento, el elemento desencadenante, la tecla presionada, etc.

Al usar Reactel enlace de eventos, debe evitar la manipulación directa de DOMelementos, pero debe implementar actualizaciones de estado llamando a setStatemétodos de componentes para activar la nueva representación.