reusing logic in vue and in react

reusing logic in vue and in react

Reusing logic in vue and in react by Jesse Chen @JSDC 2019/10/26



October 26, 2019


  1. reusing logic in vue and in react Jesse Chen JSDC

    2019 10/26/2019
  2. From Taipei, Taiwan Former KKTV web developer
 Now LINE Fukuoka

    Working on Creator’s Market
  3. what do we really want to reuse utility methods? stateful

  4. what is stateful logic

  5. let’s reuse something simple


  7. tl;dr • implicit dependencies • name clashes • snowballing complexity

  8. implicit dependencies

  9. name clashes

  10. snowball complex

  11. So react ditched mixin what came next?


  13. higher order component

  14. implicit dependencies?

  15. name clashes?

  16. HOC doesn’t solve name clashes situation name clashes?

  17. concerns for HOC • still has name clashes • a

    lot of conventions • caveats need to be taken care of • For more information: concerns
  18. but HOC points out • Explicit dependencies from `props` •

    and it’s TOP DOWN

  20. render props

  21. render props pros • only one caveat (when using it

    with React.PureComponent) • Top-down dependencies is clear in the render tree • it’s a technique not a new api, it works exactly the same as a normal component • HOC: the argument is not props but a component • Mixin: doesn’t render
  22. render props cons • one extra level in devTool after

    reusing a logic • same situation for HOCs
  23. can we use those ideas in vue.js?

  24. the answer is yes • Install @vue/babel-preset-jsx • Rewrite your

    <template> into JSX like syntax inside component’s render function
  25. Then why they are not popular in vue.js

  26. HOC in vue.js

  27. render props in vue.js

  28. HOC & render props in vue.js • HOC: more things

    need to be passed down • Slots • v-on • render props: any component renders render props component needs to be rewrite in JSX-like syntax
  29. The ultimate reason vue still using mixin

  30. is because hook is the ultimate solution for reusing logic!


  32. after using hook

  33. reuse stateful logics • mixins: very flexible, but also introduce

    troubles when the app scale and complexity raised • HOCs: many conventions and caveats / wrapper hell • render props: JSX specific / wrapper hell • hooks: a new way of thinking when writing web apps
  34. Thank you! Any questions?