react hooks LT

react hooks の理解は APIを見るんじゃなくて、videoをみて思想を知るところから始めるのが吉。 でも、一度react flux触ってからの方が良い。

Transcript

1. 3FBDU
   )PPLT
   -5 !ZVLJMBC
   
   3FBDUษڧձ
   !
   1SPUPUZQF
   $BGF
2. -5ͷͭ΋ΓͰ
   ॻ͖࢝Ίͨͷ͕ࡢ೔
3. ೔͔͔Γ·ͨ͠
   "1*ͷ௥ՃͳΜ͔͡Όͳ͔ͬͨɻ
   ࢥ૝ͩͬͨɻ
4. ʜ
   ෼͡Όແཧ
   N @
   @ N
5. ͦΕͰ΋ૣ͘ཧղ͢Δʹ͸ w ʣͪΐͬͱͰ΋SFBDUॻ͍ͨΒɺIUUQTSFBDUKTPSH EPDTIPPLTJOUSPIUNM
   ͷ
   WJEFPΛݟΔɻ࣌ؒ͋Δ͚ Ͳඈ͹͠ͳ͕ΒΈͯ΋͍͍ɻ
   w 
   SFBDU
   ͷ೔ຊޠͷυΩϡϝϯτ͕͋Δͷʹࡢ೔ؾ͖ͮ ·ͨ͠ɻWJEFPΛݟͯৄࡉΛ஌Δʹ͸೔ຊޠͷ͜Εɿ
   IUUQTKBSFBDUKTPSHEPDTIPPLTJOUSPIUNM ݸਓͷҙݟͰ͢ɻ
6. IPPLTͰղܾ͍ͨ͠໰୊ 3FBDU࢖ͬͨ͜ͱ͋Δਓ͋Δ͋ΔͰ͢ɻ࢖ͬͨ͜ͱ͕ͳ͍ํ͸
   IPPLT
   7JEFP
   *OUSPEVDUJPO͕௕ ͍͚Ͳཧղͷۙಓɻ
   w 3FBDU
   $MBTTίϯϙʔωϯτ
   Ͳ͏΍Βॳ৺ऀʹ͸࢖͏ͷ͕೉͍͠Β͍࣮͠ߦલίϯύΠϧͰ ࠷దԽ͞Εʹ͍͘
   
   ؔ਺ίϯϙʔωϯτʹ͢ΔͱղܾͰ͖Δ
   w ؔ਺ίϯϙʔωϯτͩͱTUBUF͕࢖͑ͣɺ਌ίϯϙʔωϯτ΍ଞͷTUBUF؅ཧϩδοΫϑΝΠ ϧʹॻ͔ͳͯ͘͸͍͚ͳ͘ͳ࣮ͬͯ૷͕཭Εɺ਌ίϯϙʔωϯτ͔Β౉͞ΕΔQSPQTͱͷؔ܎ ͕ૄͰͳ͘ͳΔɻ WJFXͷ͜ͱͳͷʹʣ
   
   IPPLTͰ࢖͑ΔΑ͏ʹͨ͠ɻҰͭͷϑΝΠϧͷத ʹTUBUF؅ཧϩδοΫΛશ෦ॻ͍ͪΌͬͯ΋Α͍Α͏ʹͳͬͨɻ
   w XJOEPX
   TJ[F΍λΠϚͳͲͷϋϯυϥॲཧ͸DMBTTͩͱDPNQPOFOU%JE.PVOUͳͲͷෳ਺ͷ SFBDU
   DPNQPOFOUΫϥεͷΠϕϯτϋϯυϥʹॻ͔ͳ͚ΕͳΒͣɺͦͷػೳΛϞδϡʔϧԽ Ͱ͖ͳ͔ͬͨ
   
   IPPLT
   ͷ
   VTF&⒎FDUΛ࢖͏ͱϞδϡʔϧԽͰ͖ΔΑ͏ʹͳΔɻͦͷଞɺ IPPLT
   "1*Λ࢖͏ͱϞδϡʔϧԽɾ࠶ར༻͠ʹ͔ͬͨ͘΋ͷ͕࠶ར༻Ͱ͖ΔΑ͏ʹͳΔɻ
   w 8SBQQFS
   )FMM
7. 3FBDU
   $MBTT
   $PNQPOFOU class Example extends React.Component { constructor(props) { super(props); } componentDidMount(){ } … render() { return ( <div> {this.props.title} </div> ); } }
8. 3FBDU
   'VODUJPO
   $PNQPOFOU DPOTU
   &YBNQMF
   
   QSPQT
   
   \
   
   SFUVSO
   EJW
   
   
   
   
   
   \QSPQTUJUMF^
   
   
   EJW
   ^
9. DMBTT
   ͱ
   GVODUJPO 3FBDU
   $PNQPOFOU DMBTTͰॻ͍ͨ࣌ GVODUJPOͰॻ͍ͨ࣌ ॳظԽ ΫϥεͷDPOTUSVDUPS ಺ ؔ਺ͷઌ಄ͷ
   VTF4UBUF ܈ͰॳظԽ SFOEFS͢Δ΋ͷ ΫϥεͷSFOEFSϝιου͕SFUVSO͢Δ ΋ͷ ؔ਺ͷ
   SFUVSO
   ͦͷ΋ͷ ͦͷଞͷϥΠϑαΠΫϧ ʹ͓͚Δॲཧ Ϋϥεͷؔ਺಺Ͱॲཧɿ DPNQPOFOU%JE.PVOU
   DPNQPOFOU%JE6QEBUF
   DPNQPOFOU8JMM6ONPVOU VTF&⒎FDU ܈Ͱॲཧ
   ΫϥεͷϥΠϑαΠΫϧϝιουʹ͹Β͹Β͹Βॻ ͔Ε͍ͯͨϓϩάϥϜΛͻͱ·ͱΊͷؔ਺ʹ͠ ͯଞͷίϯϙʔωϯτͰ࠶ར༻ՄೳʹͰ͖ TUBUFσʔλͷऔಘઃఆ UIJTTUBUFYY
   ΍
   qVYSFEVYͰ४උ͞Εͨํ๏ʹΑΔऔ ಘઃఆ VTF4UBUFͰఆٛͨ͠ม਺ؔ਺Ͱऔಘ
   ઃ ఆ͢Δ ίϯϙʔωϯτؒͷ TUBUFͷγΣΞ $POUFYU1SPWJEFS
   ͱQSPQT
   
   BOE
   PS
   qVYSFEVY
   BOEPS
   QSPQT
   $POUFYU1SPWJEFSͱ
   VTF$POUFYU
   BOE
   PS
   qVYSFEVY
   BOEPS
   QSPQT ্Ґʢ਌ʣίϯϙʔωϯ τͷTUBUFߋ৽ QSPQTʹΑΓ౉͍ͯ͘͠
   BOEPS
   DPOUFYU
   Ͱ
   EJTQBUDIΛ౉͢ QSPQTʹΑΓ౉͍ͯ͘͠
   BOEPS
   DPOUFYU
   Ͱ
   EJTQBUDIΛ౉͢
   ओͳҧ͍ͷΈهࡌ
10. ࢖͍ॴ w DMBTT
    DPNQPOFOU
    
    TUBUFͰঢ়ଶ؅ཧΛ࢖͏ɻIPPLT͸ ࢖͑ͳ͍ɻ
    
    IPPLTΛ࢖ͬͨ
    GVODUJPO
    DPNQPOFOUΛ಺ แ͢Δ͜ͱ͸Ͱ͖Δɻ
    w GVODUJPO
    DPNQPOFOU
    
    IPPLT
    Ͱ
    ঢ়ଶ؅ཧͰ͖ΔΑ͏ ʹͳͬͨ
11. ࠷ޙʹ w ؔ਺ܕίϯϙʔωϯτ͕ΑΓ࢖͍΍͘͢ͳͬͨ
    w IPPLTΛແཧʹ࢖͏ඞཁ͸ແ͍ɻDMBTT΍௨ৗͷGVODUJPO ͚ͩͰ΋Α͍ɻ
    w Ͱ΋ɺ͙ͪΌ͙ͪΌʹͳͬͨΓɺ৑௕ͳهड़ͩͳͱײ͡ ͨͱ͖IPPLTݕ౼ͯ͠ΈΔՁ஋͸͋Γͦ͏ɻ
12. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    Ұճͪΐͬͱ͚ͩෳࡶͳΞϓϦͰ࢖ͬͨํ͕ཧղ͕ਐ Έͦ͏ɻ
13. !ZVLJMBC ळɺDBGFʹ৽ॅਓ͕͸͍Γͦ͏ɻ
14. ৽ׁͷ*5Πϕϯτͷ֬ೝ͸
    JUOJDP
    <ݕࡧ>
    ͔
    QSPUPUZQF
    DBGF
    <ݕࡧ>ͰΠϕϯτϖʔδ΁