Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React概論

 React概論

React meetup #1 での発表資料

Naoya Ito

April 24, 2015
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

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

    )5.-ͷதʹ1)1ίʔυΛຒΊࠐΉͷͰ͸ͳ͘1)1ͷ தʹ9.-GSBHNFOUTΛϦςϥϧͰॻ͚ΔΑ͏ʹͨ͠ MJLF+49  •  ಠࣗλάΛఆٛՄೳ㱺SFVTBCMFDPNQPOFOUT
  2. 4UBUFͱ+49 •  4UBUF –  มԽ͢Δ஋ ঢ়ଶ Λѻ͏ػߏ –  ํ޲σʔλόΠϯσΟϯά – 

    setState()Ͱม͑Δͱɺ7JFXͷ࠶ඳը͕૸Δ •  +49 –  ϦςϥϧͰ9.-Ά͍ͷΛॻ͚Δ –  એݴతͳهड़ ݫີʹ͸+49ͷ͓͔͛Ͱએݴ తɺͱ͍͏Θ͚Ͱ͸ͳ͍Ͱ͢ɻ +49͸ඞਢͰ͸ͳ͍ 
  3. 7JSUVBM%0. •  3FBDUͷόοΫΤϯυʹ͋Δ %0.ߏ଄Λந৅Խͨ͠σʔλ ߏ଄ •  σʔλϞσϧͷঢ়ଶมԽʹ߹Θ ͤͯ7JSUVBM%0.ͷલޙͷ EJ⒎Λࢉग़ • 

    ੜ%0.࠶ඳըΛࠩ෼ͷ͋ͬͨ Օॴ͚ͩߦ͏ source:  React’s  diff  algorithm   h4p://calendar.perfplanet.com/2013/diff/  
  4. ॏཁͳ͜ͱ •  αʔόʔαΠυ೴Ͱ͍͚Δ –  4UBUFʹΑΔσʔλόΠϯσΟϯάɺએݴతͳ7JFXߏங +49 ɺ7JSUVBM%0. •  ίϯϙʔωϯτࢦ޲ – 

    %0.΁ͷ࡞༻ΛίϯϙʔωϯτʹہॴԽ •  σʔλϑϩʔ͕໌֬ –  εςʔτϨείϯϙʔωϯτ –  ίϯϙʔωϯτͷ*'1SPQTͱ4UBUF ͜ͷลΛҙࣝͤͣʹ ࢖͍ͬͯͯ͸௕ॴΛ ׆͔ͤͳ͍
  5. TodoApp   TodoInput   TodoList   input   ul  

    li   todos={this.state.todos} onAdd={this.onAdd} ίϯϙʔωϯτ΁ͷ ஋ͷड͚౉͠͸ 1SPQT ଐੑ ͕*'
  6. TodoApp     TodoInput   TodoList   State σʔλϑϩʔ 4UBUF͸਌ʹ࣋ͨͤͯɺ

    ࢠʹ͸1SPQTͰ౉͢ɻ 1SPQT͸ෆมʹ͠ɺࢠ͸ 4UBUFΛ࣋ͨͳ͍ε ςʔτϨείϯϙʔωϯ τ
  7. '"2 •  +49ϏϧυͲ͏͢Δͷ –  τϥϯεύΠϥ࢖͏ SFBDUUPPMT #SPXTFSJGZ #BCFMͳͲ  • 

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

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

    ඇޮ཰ͳ෦෼͸7JSUVBM%0.͕ղܾ ϑϩϯτΤϯυ6*։ൃΛɺ αʔόʔαΠυͱಉ͡෋ ߽తϓϩάϥϛϯάελ Πϧʹ໭͢