# 如何共用元件 - 從開發LINE隨你填貼圖來談 - 黃慈霖 Tzu-Lin Huang、Jesse
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

> Start here

## 隨你填貼圖
- 中文字變化較多 -> 台灣市場賣得特別好
- 原為提供內部設計師設計官方貼圖用
- 文字編輯器共用元件

> 原創市集 ==vue==
> 隨你填貼圖CMS ==nativeJS==

## Custom Element:瀏覽器提供的元件庫
(React element相容性較差)
- https://www.webcomponents.org//elements
- [Custom Elements Everywhere](https://custom-elements-everywhere.com)
- https://developers.google.com/web/fundamentals/web-components/customelements
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

##
- Matryoshka俄羅斯娃娃
- 一層包一層都是包成custom element
- shadow dom -> 有些內層的事件無法被外層監聽 -> 需要額外寫事件傳遞到外層
- property & attribute 同步 --> 無窮迴圈
- 問題點
- 自行處理事件狀態
- 避免無窮迴圈情境

## 適合場景：
- 現有HTML元素不能滿足需求
- 泰文/Emoji：使用2個UTF-16 code point表示-> chrome / safari length不同
- [answer for textarea[maxlength] interoperability issue #1467](https://github.com/whatwg/html/issues/1467#issuecomment-447650684)
- two-tone-slider，沒有標準CSS selector
- 處理跨瀏覽器問題

## reusing logic in vue and in react
- what to reuse?
- stateful logic
- ~~utility logic (pure)~~

- [Mixins Considered Harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)
- implicit dependencies -> 外層不知道mixin裡面的方法
- name clashes -> 兩個不同的mixin使用了相同的methods(會被後面的override)
- snowballing complexity -> amixin內用到bmixin
- ==Use HOC ([Higher Order Components](https://zh-hant.reactjs.org/docs/higher-order-components.html)) instead==
- no implicit dependencies？why xd
- still has name clashes
- a lot of conventions (常規拉）
- caveats need to be taken care of

- [Render Props](https://zh-hant.reactjs.org/docs/render-props.html)
- same situation on HOCs
- pros
- only one caveat (React.pureComponent)
- not a new API
- cons
- wrapper hell

-
hook is the ultimate tech to reuse logic!

https://reactjs.org/docs/hooks-intro.html#motivation