React概論

 React概論

React meetup #1 での発表資料

B4afc7d853d7f1cb6a253d3c7183c05a?s=128

Naoya Ito

April 24, 2015
Tweet

Transcript

  1. 3FBDU֓࿦ /BPZB*UP ,BJ[FO1MBUGPSN *OD  3FBDUKTNFFUVQ

  2. 3FBDUهࣄॻ͖·ͨ͠

  3. ޙฤ΋Ӷҙࣥච தͰ͢

  4. 3FBDU

  5. 3FBDU •  'BDFCPPL  •  1)1ϑϨʔϜϫʔΫͷ9)1ͷҠ২ͱͯ͠։ൃ ͞Εͨͷ͕͖͔͚ͬ –  9)1ŋŋŋ೥͘Β͍ • 

    )5.-ͷதʹ1)1ίʔυΛຒΊࠐΉͷͰ͸ͳ͘1)1ͷ தʹ9.-GSBHNFOUTΛϦςϥϧͰॻ͚ΔΑ͏ʹͨ͠ MJLF+49  •  ಠࣗλάΛఆٛՄೳ㱺SFVTBCMFDPNQPOFOUT
  6. 3FBDUͱ͸ •  6*։ൃ༻ͷ+BWB4DSJQUϥΠϒϥϦ •  3FBDU͕ఏڙ͢Δͷ͸7JFXͷΈ •  *UTHPBMJTUPCFTJNQMF EFDMBSBUJWFBOE DPNQPTBCMF XJLJQFEJB

    
  7. 3FBDU%FWFMPQFS5PPMT Ͱ'BDFCPPLΛݟΔͱɺ ͔֬ʹϓϩμΫγϣϯͰ ࢖ΘΕ͍ͯΔ

  8. ൃ૝ •  1)1Ͱ͸ຖճϖʔδΛॻ͖׵͑ͯͨɻ؆୯ͩͬ ͨ •  +BWB4DSJQUͰ6*։ൃ͢ΔΑ͏ʹͳͬͯ %0.ૢ࡞Ͱෳࡶʹͳͬͨ •  9)1Λ+BWB4DSJQUʹҠ২ͯ͠ɺಉ͡ύϥμ ΠϜͰ։ൃͰ͖ͳ͍͔

    
  9. •  ैདྷͱ͸·ͬͨ͘ҟͳΔํ๏Ͱ%0.Λѻ͏ •  खಈͰ%0.Λߋ৽ͯ͠ঢ়ଶΛ؅ཧ͢Δͱ͍ͬͨچଶґ વͱͨ͠։ൃํ๏͸εέʔϥϏϦςΟͷ఺Ͱྼ͍ͬͯΔ •  ϢʔβʔΠϯλϑΣʔεΛΑΓએݴతʹهड़Ͱ͖Δɻͦ ͯ͠Ծ૝%0.ʹΑΓ%0.ͷߋ৽͸࠷খʹ཈͑ΒΕΔ

  10. Ͳ͏͍͏͜ͱͩ

  11. ˺αʔόʔαΠυ೴Ͱॻ͚Δ •  7JFX͸ৗʹશߋ৽ – Ϟσϧ͕ߋ৽͞ΕͨΒ7JFXΛશ෦ߋ৽ – 7JFXΛߋ৽͔ͨͬͨ͠Βશ෦ϨϯμϦϯά ͠ͳ͓͢ – ෋߽తϓϩάϥϛϯά •  7JFX͸એݴతʹఆٛ )5.-ͩ͠

    
  12. ͭ·Γ

  13. ैདྷͷ΍Γํ ໋ྩతͳ%0.ૢ ࡞ίʔυ܈

  14. ैདྷͷख๏ͷ೉͠͞ •  %0.ૢ࡞ͷ೉͠͞ – %0.͕ঢ়ଶΛ͍࣋ͬͯΔ – άϩʔόϧ – ඇಉظ ͍ͭɺͲ͔͜Βॻ͖ ׵͑ΒΕΔ͔Θ͔Β ͳ͍ঢ়ଶΛؒҧ͍ͳ ͘؅ཧ͠ͳ͚Ε͹ͳ

    Βͳ͍
  15. 3FBDUͰ͸

  16. 7JFX͸એݴతʹ ఆٛ TFU4UBUF ͢Δͱ SFOEFS Ͱ7JFX͕ ·Δ͝ͱߋ৽

  17. σʔλ͕มΘͬͨΒ 7JFX͸શߋ৽ αʔόʔαΠυͱಉ͡ߟ͑ํ 

  18. 4UBUFͱ+49 •  4UBUF –  มԽ͢Δ஋ ঢ়ଶ Λѻ͏ػߏ –  ํ޲σʔλόΠϯσΟϯά – 

    setState()Ͱม͑Δͱɺ7JFXͷ࠶ඳը͕૸Δ •  +49 –  ϦςϥϧͰ9.-Ά͍ͷΛॻ͚Δ –  એݴతͳهड़ ݫີʹ͸+49ͷ͓͔͛Ͱએݴ తɺͱ͍͏Θ͚Ͱ͸ͳ͍Ͱ͢ɻ +49͸ඞਢͰ͸ͳ͍ 
  19. શ෦ؙ͝ͱߋ৽Ͱ͸ɺޮ཰͕ѱ͍  ͦ͜Ͱ7JSUVBM%0.

  20. 7JSUVBM%0. •  3FBDUͷόοΫΤϯυʹ͋Δ %0.ߏ଄Λந৅Խͨ͠σʔλ ߏ଄ •  σʔλϞσϧͷঢ়ଶมԽʹ߹Θ ͤͯ7JSUVBM%0.ͷલޙͷ EJ⒎Λࢉग़ • 

    ੜ%0.࠶ඳըΛࠩ෼ͷ͋ͬͨ Օॴ͚ͩߦ͏ source:  React’s  diff  algorithm   h4p://calendar.perfplanet.com/2013/diff/  
  21. 3FBDUͷ੹຿  %0.ͷߋ৽  Πϕϯτ΁ͷ൓Ԡ )551ϦΫΤετ "KBY ɺϧʔ ςΟϯάɺϞσϧɺӬଓσʔλͳ Ͳ͸ײ஌͠ͳ͍ɻଞͷ΋ͷ࢖ͬͯ Ͷ

  22. ॏཁͳ͜ͱ •  αʔόʔαΠυ೴Ͱ͍͚Δ –  4UBUFʹΑΔσʔλόΠϯσΟϯάɺએݴతͳ7JFXߏங +49 ɺ7JSUVBM%0. •  ίϯϙʔωϯτࢦ޲ – 

    %0.΁ͷ࡞༻ΛίϯϙʔωϯτʹہॴԽ •  σʔλϑϩʔ͕໌֬ –  εςʔτϨείϯϙʔωϯτ –  ίϯϙʔωϯτͷ*'1SPQTͱ4UBUF ͜ͷลΛҙࣝͤͣʹ ࢖͍ͬͯͯ͸௕ॴΛ ׆͔ͤͳ͍
  23. 5PEP"QQίϯϙʔωϯτ͸ 5PEP*OQVUίϯϙʔωϯτͱ 5PEP-JTUίϯϙʔωϯτͰ ߏ੒ $PNQPTJUJPO 

  24. TodoApp   <TodoInput  />   <TodoList  /> ίϯϙʔωϯ τ͸+49Ͱ ࢀর

    ࣮͸VM΍MJ΋ 3FBDUίϯϙʔ ωϯτ
  25. TodoApp   TodoInput   TodoList   input   ul  

    li   todos={this.state.todos} onAdd={this.onAdd} ίϯϙʔωϯτ΁ͷ ஋ͷड͚౉͠͸ 1SPQT ଐੑ ͕*'
  26. ίϯϙʔωϯτԽ Πϕϯτ΍ೖग़ྗ͸ɺͦ ͷίϯϙʔωϯτΫϥε ಺ʹہॴԽ͞ΕΔ

  27. TodoApp     TodoInput   TodoList   State σʔλϑϩʔ 4UBUF͸਌ʹ࣋ͨͤͯɺ

    ࢠʹ͸1SPQTͰ౉͢ɻ 1SPQT͸ෆมʹ͠ɺࢠ͸ 4UBUFΛ࣋ͨͳ͍ε ςʔτϨείϯϙʔωϯ τ
  28. ͭ·Γ •  γϯϓϧͳύϥμΠϜͰॻ͚Δ –  αʔόʔαΠυ೴ –  εςʔτϨεঢ়ଶΛؾʹ͠ͳ͍͍ͯ͘ •  σʔλϑϩʔ͕໌֬ͳͷͰ࣮૷Օॴʹ໎͍͕গ ͳ͍

    •  ͦͷίϯϙʔωϯτʹ·ͭΘΔίʔυ͸ͦͷί ϯϙʔωϯτ಺ʹ͋ΔͷͰݟ௨͕͠ྑ͍
  29. ੜ࢈ੑΑΓ৴པੑ •  ੜ࢈ੑΛߴΊΔϥΠϒϥϦͱ͍͏ΑΓ •  ՄಡੑɺอकੑͳͲ௕ظతͳ৴པੑʹॏ ͖Λஔ͍͍ͯΔ ίʔυ͸ॻ࣌ؒ͘ΑΓಡ Ή࣌ؒͷํ͕௕͍ͩΖ  CZ'BDFCPPL

    
  30. '"2 •  +49ϏϧυͲ͏͢Δͷ –  τϥϯεύΠϥ࢖͏ SFBDUUPPMT #SPXTFSJGZ #BCFMͳͲ  • 

    K2VFSZซ༻Ͱ͖Δ  –  Ͱ͖Δ͸Ͱ͖Δ͚Ͳ%0.ૢ࡞͸ύϥμΠϜ͕ҧ͏ͷͰɺΑ͘ Θ͔Μͳ͍Ͱ΍Δ΂͖Ͱ͸ͳ͍ BKBYͱ͔͸ߏΘͳ͍  •  ϦΞΫςΟϒϓϩάϥϛϯά 31 ͳͷ  –  σʔλϑϩʔʹண໨એݴత͋ͨΓ͕ʮϦΞΫςΟϒʯ –  ͨͩ͠ʮϦΞΫςΟϒʯͷݴ༿ͷҙຯ͕޿͗͢ΔͷͰཁ஫ҙ •  3FBDU͚ͩͰ31Λ೺Ѳ͠Α͏ͱ͢Δͱ஍ཕɺ͔΋ •  'VODUJPOBM3FBDUJWF1SPHSBNNJOHํ໘΁Ͳ͏ͧ
  31. ͓·͚*NNVUBCMFKT •  GBDFCPPLJNNVUBCMFKT •  *NNVUBCMFͳσʔλߏ଄Λఏڙ͢ΔϥΠϒϥ Ϧ –  var  map2  =

     map1.set('key',  value);   –  ඇഁյతʹૢ࡞Ͱ͖Δσʔλߏ଄ –  -JTU .BQ 4FU 4FR •  4UBUFͰѻ͏σʔλߏ଄༻ʹ࢖͏ͱḿΔ
  32. 3FBDU໋ྩతˠએݴత •  ໋ྩతͰ͋ͬͨ7JFXͷ૊Έཱͯ %0.ૢ࡞ Λɺ એݴతͳύϥμΠϜʹ •  ʮσʔλϞσϧʹมߋ͕͋ͬͨΒ%0.Λؙ͝ ͱߋ৽ʯ – 

    ඇޮ཰ͳ෦෼͸7JSUVBM%0.͕ղܾ ϑϩϯτΤϯυ6*։ൃΛɺ αʔόʔαΠυͱಉ͡෋ ߽తϓϩάϥϛϯάελ Πϧʹ໭͢
  33. 13࠾༻ͯ͠·͢ ʮ,BJ[FO࠾༻ʯͰݕࡧɻڵ ຯ͋Δ͚ͩͰ΋Մɻͦͷ৔ ߹͸8BOEUFEMZͰɻ