SFCで挑戦するFunctional Component/Functional Component Challenge at SFC

Functional Component、調べてみました。

Transcript

1. SFCで挑戦する Fucntional Component Ռ෺Ϧϯ@FruitRiin גࣜձࣾελσΟετ 2020/7/31 Remote.vue #2
2. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • Twitter, Qiita, Github, Speakerdeck • גࣜձࣾελσΟετ • ϚχϡΞϧ࡞੒ϓϥοτϑΥʔϜʮTeachme Bizʯ • Vue+Railsͱ͍͏ελοΫ • Vue͸͍͍ͧ
3. ϏδϡΞϥΠζखॱॻͷ࡞੒ɾڞ༗ɾ؅ཧͷTeachme Biz
4. એ఻ʢͱ͍͏͔ࣗຫʣ
6. Functional Component ͱ͸ʁ
7. Functional Componentは思想及びVueの機能 • ঢ়ଶΛ࣋ͨͳ͍ίϯϙʔωϯτ • ϦΞΫςΟϒͳσʔλ͕ͳ͍ • ϥΠϑαΠΫϧϝιου΋ͳ͍ • props͚ͩΛ࣋ͭ • ຤୺ͷίϯϙʔωϯτ͸͋Γ͕ͪͰ͸ʁ • ͜Μͳίϯϙʔωϯτ͸ ໌ࣔ͢Δ͜ͱͰύϑΥʔϚϯεΛ޲্ͤ͞ΒΕΔ
8. 有効にする方法2通り • exportͯ͠ΔΦϒδΣΫτͰϚʔΫ • Vueͷ<template functional>ͰϚʔΫ(2.5Ҏ߱ͷΈʣ
9. υΩϡϝϯτ্ͷॴࡏ͕Ṗ • renderؔ਺ͱ΋JSXͱ΋ඞਢͷؔ܎Ͱ͸ͳ͍
10. ࠷ॳͷ αϯϓϧίʔυ͕SFC͡Όͳ͍ • ͦΕ͸ͦ͏ • ୹͗ͯ͢Α͘Θ͔Βͳ͍
11. Functional ComponentʴJSXඞਢʁ • ͦΜͳ͜ͱ͸ͳ͍ • <template functional> ͕͋Δ͜ͱ͔Β΋Θ͔Δ • ࠓ͸ӳޠͷهࣄ͕ͨ͘͞ΜҾ͔͔ͬΔͶ
12. Vue DevToolでチェック！ • σϞ͠·͢
13. Vue DevToolでチェック！ • ίϯϙʔωϯτ300ݸ͘Β͍Λ100msͰϨϯμϦϯάˠ34fps
14. Vue DevToolでチェック！ • ී௨ͷίϯϙʔωϯτ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷ਺஋ʣ
15. Vue Perfomance Toolでチェック！ • FunctionalίϯϙʔωϯτΛ100msͰϨϯμϦϯά ʢύϑΥʔϚϯεܭଌதͷ਺஋ʣ
16. ܭଌํ๏ͷ౎߹্ͱ͍͏࿩΋͋Δ͕… ʢϓϩϑΝΠϥಈ͔ͯ͠Δ͔ΒͶʣ
17. なんにせよ速い！ • උߟɿύϑΥʔϚϯεπʔϧͷνΣοΫͳ͠ͳΒ ௨ৗͷίϯϙʔωϯτͰ΋2000ݸ͘Β͍·Ͱ͸ଟ෼60fpsग़ͯΔ
18. Functional Component やっていき
19. Functional Componentにないもの • data • computed • watch • ϥΠϑαΠΫϧΠϕϯτશͯ • this • props͸ this Ͱ͸ͳ͘ propsͰΞΫηε͢Δ
20. propsを使うコード • ϛχϚϜͳܗ͸͜Μͳײ͡Ͱ͢
21. methodsを使うコード • $options.methods ͷத • propsΛҾ਺ʹͱΔ͜ͱ΋Մೳ
22. その他の違い • ΫϥεɺελΠϧ • ࣗಈͰ߹੒͞Εͳ͍ • ref • ࣗಈͰ͔ͭͳ͍ • HTMLҰൠଐੑ • ల։͠ͳ͍ͱͳ͍ • Πϕϯτ • this.$emit͕ͳ͍ɺlisteners https://blog.logrocket.com/how-to-use-stateless-components-in-vue-js/
23. ॏཁɿΑ͠ͳʹ΍ͬͯ͘Εͳ͍
24. メンテナンスコストも勘案すべき？ • Functional ComponentΛ࡞Δͱ͋ͱ͔Βར༻͢Δͱ͖ classɺstyleɺHTMLଐੑͷ߹੒ɾ෇༩ͰϋϚΔ͜ͱ΋ • ։ൃνʔϜͷϦςϥγ΍Χόʔྗ΋צҊ্ͨ͠Ͱ࢖͍͍ͨ • ύϑΥʔϚϯεΫϦςΟΧϧͰͳ͚Ε͹࢖Θͳ͍બ୒ࢶ΋͋Δ • ܭଌํ๏ͱ࣮૷ํ๏͸೺Ѳ͓͖͍ͯͨ͠
25. まとめ • Functional Component͸΍͍ • 1000ݸ2000ݸϨϯμϦϯά͢ΔͳΒͶ • AtomicσβΠϯͷAtomͱ͔࡞Δ࣌࢖͑ͦ͏ • ΠϯλʔϑΣʔε͕ͪΐͬͱҧ͏ • ࢖͏͔࢖Θͳ͍͔ͷ൑அ΋࣮૷ऀʹҕͶΒΕΔ
26. Vue͸͍͍ͧ
27. ొஃޙͷิ଍ɿVue3Ͱ͸SFCͰ࢖͑ͳ͍ʁ • Functional Componentͦͷ΋ͷ͸͋Δ • SFCͰ͸࢖͑ͳ͍Β͍͠ • ؔ਺Ͱ͋Εʂͱͷ͜ͱ • renderؔ਺͔JSXΛॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠ • (´ɾωɾʆ)