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

react hooks LT

Avatar for yukilab yukilab
August 07, 2019

react hooks LT

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

Avatar for yukilab

yukilab

August 07, 2019
Tweet

More Decks by yukilab

Other Decks in Technology

Transcript

  1. IPPLTͰղܾ͍ͨ͠໰୊ 3FBDU࢖ͬͨ͜ͱ͋Δਓ͋Δ͋ΔͰ͢ɻ࢖ͬͨ͜ͱ͕ͳ͍ํ͸IPPLT7JEFP*OUSPEVDUJPO͕௕ ͍͚Ͳཧղͷۙಓɻ w 3FBDU$MBTTίϯϙʔωϯτͲ͏΍Βॳ৺ऀʹ͸࢖͏ͷ͕೉͍͠Β͍࣮͠ߦલίϯύΠϧͰ ࠷దԽ͞Εʹ͍ؔ͘਺ίϯϙʔωϯτʹ͢ΔͱղܾͰ͖Δ w ؔ਺ίϯϙʔωϯτͩͱTUBUF͕࢖͑ͣɺ਌ίϯϙʔωϯτ΍ଞͷTUBUF؅ཧϩδοΫϑΝΠ ϧʹॻ͔ͳͯ͘͸͍͚ͳ͘ͳ࣮ͬͯ૷͕཭Εɺ਌ίϯϙʔωϯτ͔Β౉͞ΕΔQSPQTͱͷؔ܎ ͕ૄͰͳ͘ͳΔɻ

    WJFXͷ͜ͱͳͷʹʣIPPLTͰ࢖͑ΔΑ͏ʹͨ͠ɻҰͭͷϑΝΠϧͷத ʹTUBUF؅ཧϩδοΫΛશ෦ॻ͍ͪΌͬͯ΋Α͍Α͏ʹͳͬͨɻ w XJOEPXTJ[F΍λΠϚͳͲͷϋϯυϥॲཧ͸DMBTTͩͱDPNQPOFOU%JE.PVOUͳͲͷෳ਺ͷ SFBDUDPNQPOFOUΫϥεͷΠϕϯτϋϯυϥʹॻ͔ͳ͚ΕͳΒͣɺͦͷػೳΛϞδϡʔϧԽ Ͱ͖ͳ͔ͬͨIPPLTͷVTF&⒎FDUΛ࢖͏ͱϞδϡʔϧԽͰ͖ΔΑ͏ʹͳΔɻͦͷଞɺ IPPLT"1*Λ࢖͏ͱϞδϡʔϧԽɾ࠶ར༻͠ʹ͔ͬͨ͘΋ͷ͕࠶ར༻Ͱ͖ΔΑ͏ʹͳΔɻ w 8SBQQFS)FMM
  2. 3FBDU$MBTT$PNQPOFOU class Example extends React.Component { constructor(props) { super(props); }

    componentDidMount(){ } … render() { return ( <div> {this.props.title} </div> ); } }
  3. 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 PSqVYSFEVY BOEPSQSPQT $POUFYU1SPWJEFSͱVTF$POUFYU BOE PSqVYSFEVY BOEPSQSPQT ্Ґʢ਌ʣίϯϙʔωϯ τͷTUBUFߋ৽ QSPQTʹΑΓ౉͍ͯ͘͠ BOEPSDPOUFYUͰEJTQBUDIΛ౉͢ QSPQTʹΑΓ౉͍ͯ͘͠ BOEPSDPOUFYUͰEJTQBUDIΛ౉͢ ओͳҧ͍ͷΈهࡌ