ReactとRxで負債作った

Transcript

1. ReactהRxJSד 頾⫈׾⡲׏׋
   

2. Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger

   OSS Contributor of V8 About http://info.b6n.ch

3. ו׿ז頾⫈?
   React׾눤何鸡׃גRxךObservable׾湫䱸Ⳣ椚דֹ׷״ֲח׃׋
   

4. Why?
   Reduxָ֮׿ת㥨ֹׄׯזַ׏׋ַ׵
   

5. ז׈頾⫈חז׏׋
   React16ח،حفر٦زדֹזְ PropsָObservableזךַ麩ֲךַⴻⴽדֹזְ 杝荈ֺׅ
   

6. Implementation
   Reactח床ׅprops♧א♧אָObservableחז׏גֶ׶ծ ⰻ鿇ד䗳銲ז皘䨽׌ֽ،حفر٦زׁ׸׷կ shouldComponentUpdate׮䗳銲זְ 剑䓼(^^)
   

7. class Component extends React.Component {! render() {! return (! <div>!

   <h1>{title}</h1>! <Subscriber>! <span className={classNameObservable}>! {contentObservable}! </span>! </Subscriber>! </div>! )! }! }!

8. import {Tags as T} from './subscriber';! ! class Component extends

   React.Component {! render() {! return (! <div>! <h1>{title}</h1>! <T.Span className={classNameObservable}>! {contentObservable}! </T.Span>! </div>! )! }! }!

9. How to work
   Observableָ♧䏝SubscriberַTags穗歋ד鏣㹀ׁ׸׷הծ ֮הכObservableח⦼ָ崧׸׷׋ןחTagsַSubscriberךؒٔ،ך ׫ָ刿倜ׁ׸׷ Observableⰻ鿇ח⦼ָ崧׸׷׌ֽזךדծ鋵؝ٝه٦طٝزך componentWillReceivePropsכ⹛⡲׃זְ

10. How to implement
    Subscriberכstateחvdom׾׮׏גְגծObservableָ刿倜ׁ׸׷ ׋ןחsetState׾ㄎן⳿׃גvdom׾湫䱸ٖٝتؚׅٔٝ׷
    

11. class Subscriber extends React.Component {! constructor(p) {! super(p);! this.state =

    { vdom: null };! }! ! render() { return this.state.vdom }! ! componentDidMount() {! this.searchAndSubscribeObservables();! }! }!

12. const foundObservables = [];! ! React.Children.map(element.children, (child) => {! if

    (child instanceof Observable) {! foundObservables.push(! {! update: value => updateChild(element, value),! observable: child! });! } else {! this.checkProps(child);! }! });!

13. Observable.combineLatest! .apply(! null,! foundObservables! .map(v => v.observable))! .subscribe(updates => {!

    updates.forEach(update => {! update();! })! });!

14. React.Element
    Reactךⰻ鿇דכReact.Elementָjsx♳ך1銲稆׾邌ׅկ

15. {! $$typeof: Symbol.for('react.element'),! type: 'div' | constructor,! key: key,! ref:

    ref,! props: props,! }!

16. Fastest - Mutable -
    React.ElementכdevelopmentדכObject.feezeׁ׸גimmutable זؔـآؙؑزחז׏גְ׷կ mutableזקֲָ傍ְךדObject.freezeַ׵Ꟛ佝ׅ׷
    

17. Mutable React
    瑞ךReact.Element׾⡲׏ג$$typeof׾؝ؾ٦ׅ׷ֿהדծ ٖٖؔؔReact.Element׾⡲䧭 ׉׸׾׉ךתתSubscriber⟃♴ךchildrenח床ֿׅהד Mutableזtreeָ⡲䧭דֹ׷
    

18. const REACT_ELEMENT_TYPEOF ! = React! .createElement('div', {})['$$typeof'];! ! const mutableElement

    = {! '$$typeof': REACT_ELEMENT_TYPEOF,! ...! }!

19. Hyper Fast Update
    SubscriberכֿךMutable Tree׾刿倜ָ֮׏׋皘䨽ך׫㢌刿׃ג䨱 ׅךדծReact.Elementךⱄ⡲䧭؝أزָ0חז׷կ

20. Problems
    TypeScriptדpropsך㘗׾➰ֽ׷הֹחObservableזךַPrimitive זךַ״ֻ׻ַ׵זְךהծ Subscriberד㔲ת׸׋皘䨽כ؝٦س♳כObservable׌ָծ㹋ꥷחכ Primitiveז⦼ָ床׏גֻ׷ךדPropTypesהַ֮׷ה㔭׷
    

21. <Subscriber>! <MyComponent! propsA={porpsA as any}! propsB={propsB as any}/>! </Subscriber>!

22. Problems
    ObservableכׅץגshareReplyהַךreply禸ח׃זְה⹛⡲׃ז ְ

23. Problems
    props⡲׷ךָ꬗⦜ ♧א♧אךpropsָObservableזךדׅץגךprops嫣חreducer׫ ׋ְז׮ך׾欽䠐׃זֽ׸לז׵זְ

24. Problems
    荈ⴓָ鍗׏גְ׷ךָObservableזךַPrimitiveזךַ׻ַ׵זֻ ז׏גְֻ

25. Problems
    Reactך،حفر٦زָדֹזְ React.Elementךⰻ鿇תד㢌刿׃גְ׷ךדծFiberך⚥תד鋅זְ ה⹛ַזְ⾱㔓ָ׻ַ׵זְկ 儗꟦ךيت

26. Summary
    傀㶷ך׮ך׾穈׫さ׻ׇגءٝفٕחאֻ׶ת׃׳ֲ ReactחRxכְ׵זְךַ׮׃׸זְ