How useEvent would change our applications

Techfeed Conference 2022 #React

Transcript

1. LPCB
   )PXVTF&WFOUXPVME
   DIBOHFPVSBQQMJDBUJPOT
   3FBDU
   
   

   View Slide

2. LPCB
   *T4VTQFOTFGPS%BUB
   'FUDIJOH3FBEZZFU
   3FBDU
   
   

   View Slide

3. !LPCB
   
   

   View Slide

4. 3'$VTF&WFOU
   w 5IJTJTBOFXQSPQPTBMUPBEEBOFX3FBDU)PPLTDBMMFElVTF&WFOUz
   w 5IJTXJMMJNQSPWFEFWFMPQFSFYQFSJFODFESBTUJDBMMZ
   w 5IJTSFEVDFTDPNQMFYJUZSFHBSEJOHEFQFOEFODZMJTUT
   w ⚠⚠⚠5IJTXJMMCFSFMFBTFEJOBNJOPSSFMFBTF CVUUIFQSPQPTBMJTJO
   BOFBSMZTUBHF TPJUNJHIUCFDIBOHFE⚠⚠⚠
   
   

   View Slide

5. VTF&WFOU
   
   

   View Slide

6. VTF$BMMCBDL
   
   

   View Slide

7. 5IFEFQFOEFODZMJTUJTIBSEʜ
   w 8FBSFTPNFUJNFTPWFSXIFMNFECZUIFEFQFOEFODZMJTU
   w 8FIBWFUPQVUWBMVFTJOUIFMJTUUPHFUUIFMBUFTUWBMVFTXIJMFEPO`U
   IBWFUPFYFDVUFUIFF
   ff
   FDUFWFOUIPVHIUIFWBMVFTBSFDIBOHFE
   w *U`TIBSEUPVOEFSTUBOEXIFOF
   ff
   FDUTTIPVMECFJOWPLFE
   w )PXNBOZUJNFTEJEZPVQVUAFTMJOUEJTBCMFOFYUMJOFSFBDUIPPLT
   FYIBVTUJWFEFQTAJOZPVSBQQMJDBUJPOT
   //
   
   

   View Slide

8. 5IFEFQFOEFODZMJTUJTIBSEʜ
   
   

   View Slide

9. VTF&WFOUXJUIEFQFOEFODZMJTU
   
   

   View Slide

10. "QQSPYJNBUF#FIBWJPS
    
    

    View Slide

11. 4UBUJD5ZQJOHBOE-JOU
    
    w FTMJOUQMVHJOSFBDUIPPLTUSFBUTlVTF&WFOUzGVODUJPOTBTTUBCMF
    GVODUJPOT
    w lVTF&WFOUzXPVMECFPQQPSUVOJUJFTUPBEESFTUSJDUJPOTBUUIFUZQF
    TZTUFNMFWFM PQBRVFUZQF
    
    w lVTF&WFOUzGVODUJPOTNVTUO`UCFDBMMFEJOSFOEFSGVODUJPOT
    w )PPLTPOMZDBOBDDFQUlVTF&WFOUzGVODUJPOT
    

    View Slide

12. .BLFlVTF&WFOUzGVODUJPOT
    
    

    View Slide

13. /BNJOH%FDJTJPO
    
    w IUUQTHJUIVCDPNSFBDUKTSGDTQVMM
    JTTVFDPNNFOU
    w 5IJT)PPLJTWFSZDPNNPOBOETIPVMECFPOFXPSE
    w 5IJTJTOFXUZQFPGGVODUJPOMJLFl)PPLTzBOEl$PNQPOFOUTz
    w lGVODUJPOTz
    

    View Slide

14. lVTF&WFOUzJTTUJMMJOBQSPQPTBM
    TUBHF CVUJUNBLFTPVSBQQMJDBUJPO
    DPEFFBTJFSBOENPSFJOUVJUJWF
    
    

    View Slide

15. 5IBOLZPV
    
    

    View Slide

16. 0OFNPSFUIJOH
    
    

    View Slide

17. LPCB
    *T4VTQFOTFGPS%BUB
    'FUDIJOH3FBEZZFU
    3FBDU
    
    

    View Slide

18. )PXTIPVMEXFVTF4VTQFOTFGPS
    %BUB'FUDIJOHXJUI3FBDUW
    
    

    View Slide

19. 3FBDUWr3FBDU#MPH
    IUUQTSFBDUKTPSHCMPHSFBDUWIUNM
    l*O3FBDU ZPVDBOTUBSUVTJOH4VTQFOTFGPSEBUBGFUDIJOH
    JOPQJOJPOBUFEGSBNFXPSLTMJLF3FMBZ /FYUKT )ZESPHFO PS
    3FNJY"EIPDEBUBGFUDIJOHXJUI4VTQFOTFJTUFDIOJDBMMZ
    QPTTJCMF CVUTUJMMOPUSFDPNNFOEFEBTBHFOFSBMTUSBUFHZz
    
    

    View Slide

20. 8IZTIPVMEO`UXFVTF4VTQFOTFGPS
    %BUB'FUDIJOHXJUIPVUGSBNFXPSLT
    
    

    View Slide

21. 
    

    View Slide

22. 8BUFSGBMMQSPCMFNT
    w *GZPVTUBSUVTJOH4VTQFOTFGPSZPVSEBUBGFUDIJOHMPHJD JUXJMMHFU
    XPSTFVTFSFYQFSJFODFTGPSZPVSBQQMJDBUJPOT
    w 4VTQFOTFGPS%BUB'FUDIJOHTVTQFOETZPVSSFOEFSJOHJOUIFNJEEMF
    XIJDINFBOTJUXPVMECMPDLPUIFSGFUDIJOHJOUIFSFOEFSJOHQSPDFTT
    w 5IJTJTTPDBMMFEUIFl'FUDIPO3FOEFSzQBUUFSO
    
    

    View Slide

23. 
    3FOEFS
    'FUDI
    1SP
    fi
    MF 1SP
    fi
    MF
    'FUDI
    5PSV,PCBZBTIJ
    'FUDI
    3FQPTJUPSJFT
    ɾGBDFCPPLSFBDU
    ɾWFSDFMTXS
    'PMMPXJOH
    'PMMPXFST
    5PSV,PCBZBTIJ
    1SP
    fi
    MF 1SP
    fi
    MF
    5PSV,PCBZBTIJ
    'PMMPXJOH
    'PMMPXFST
    'BMMCBDL
    3FOEFS
    'BMMCBDL
    3FOEFS
    'BMMCBDL
    

    View Slide

24. 
    

    View Slide

25. 6TF3FOEFS"T:PV'FUDI
    w 4VTQFOTFXBJUTGPSEBUBUIBUIBWFBMSFBEZCFJOHGFUDIFE
    w l3FOEFS"T:PV'FUDIzTIPVMEGFUDIEBUBCFGPSFSFOEFSJOH
    w 1PQVMBSMJCSBSJFTBSFGFUDIJOHPOSFOEFSJOH XIJDIJTOPUl3FOEFS"T
    :PV'FUDIz
    
    

    View Slide

26. 
    3FOEFS
    'FUDI
    1SP
    fi
    MF 1SP
    fi
    MF
    'FUDI
    3FQPTJUPSJFT
    ɾGBDFCPPLSFBDU
    ɾWFSDFMTXS
    5PSV,PCBZBTIJ
    1SP
    fi
    MF
    5PSV,PCBZBTIJ
    'PMMPXJOH
    'PMMPXFST
    'PMMPXJOH
    'PMMPXFST
    'BMMCBDL
    'BMMCBDL 3FOEFS
    'BMMCBDL 3FOEFS
    4BNF4VTQFOTF#PVOEBSZ
    'FUDI
    

    View Slide

27. -JCSBSJFT
    w 483BOE3FBDU2VFSZTVQQPSU4VTQFOTFBTBOFYQFSJNFOUBM BOE
    35,2VFSZUSJFTUPBEEUIFTVQQPSU#VUUIFZIBWFO`UQSPWJEFEUIF
    CFTU"1*XJUI4VTQFOTFZFU
    w IUUQTHJTUHJUIVCDPNTIVEJOH
    FGBDDFFEFBEFGF
    
    

    View Slide

28. 'SBNFXPSLT
    w 'SBNFXPSLTLOPXXIFUIFSXIJDIEBUBBSFSFRVJSFEGPSBQBHF
    CFDBVTFUIFZIBWFSPVUFSDPO
    fi
    HVSBUJPOT TPUIFZDBOQSFQBSFEBUB
    CFGPSFSFOEFSJOH
    w /FYUʜHFU4FSWFS4JEF1SPQT HFU4UBUJD1SPQT
    w 3FMBZʜVTF1SFMPBEFE2VFSZ !EFGFS
    w 3FNJYʜMPBEFSGVODUJPOT
    
    

    View Slide

29. 
    IUUQTUXJUUFSDPNMFFFSPCTUBUVT
    

    View Slide

30. .JTDFMMBOFPVT
    w #VJMUJO$BDIF4VQQPSU
    w IUUQTHJUIVCDPNSFBDUXHSFBDUEJTDVTTJPOT
    w )PXTIPVMEXFIBOEMFEFQFOEFOUTDFOBSJPT
    
    

    View Slide

31. 5IBOLZPV
    
    

    View Slide