Syntetiske events i ReactJS

Først et bittelite avsnitt om React, hva det er og hvorfor det er kult.

Her er en enkel applikasjon som viser deg forskjellene mellom å jobbe med ordinære eventhandlere i JavaScript og syntetiske eventhandlere i React.

I applikasjonen viser jeg et klikkbart rektangel. Et klikk på rektangelet og du kan dra det rundt, et nytt klikk for å slippe det. Alternativt kan du bruke fingeren dersom du bruker et nettbrett.

App og kode er tilgjengelig her: http://reactevents.herokuapp.com/

For å få til dette i ren JavaScript trenger du bare å sette opp et par eventhandlere som holder øye med musebevegelser og museklikk, og noen få variabler som sier noe om rektangelets status samt de siste relative koordinatene.

Denne metoden er ganske lettprogrammert og kraftig, men har sine ulemper. Viktigst av disse er at du jobber i global scope, så om du skal utvide applikasjonen med flere lyttere er det en risiko for at du ender opp med uoversiktelig kode og generell kodepine.

Det kan derfor være en fordel å gjøre koden komponentbasert, slik at hver blokk står på egne bein og ikke har globale side-effekter. Det er nettopp dette som er tilnærmingsmåten til React.

I stedet for å sette opp en global eventhandler, kan vi i React sette opp en syntetisk eventhandler som bare agerer på hendelser på selve komponenten. Variablene du setter i komponenten er ikke tilgjengelig for andre komponenter, ei heller i det globale miljøet.

Bruksmønsteret er ellers omtrent identisk. Du setter opp et kall til eventhandleren i render, og så til funksjonen som skal kjøres når eventen blir fanget.

I praksis blir begge applikasjonene identiske for brukeren. Kodebasen er vidt forskjellig.

Samme demo lå i JavaZone-decket som «Synthetic Reactive Events»: en Mouse-komponent med dragging i this.state, onMouseDown / onMouseMove, og touch ved siden av mus. Hendelsessystemet i React er fullsyntetisk. Det er en komplett reimplementasjon, virtuelt, ikke bundet i DOM. Du kan skrive dine egne events. De oppfører seg likt i alle nettlesere.

Det var det som ble med videre. Ikke Heroku-demoen. Modellen: en komponent eier eventene sine, setState eier tilstanden, render eier visningen. SvenJS er den runtime som ble igjen da Facebook-delen falt av.