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

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

Functional Component、調べてみました。

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

July 31, 2020
Tweet

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. એ఻ʢͱ͍͏͔ࣗຫʣ

  5. None
  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Λॻ͔ͳ͍ͱ͍͚ͳ͍Β͍͠

    • (´ɾωɾʆ)