ReactとRxで負債作った

ReactとRxでだめなことやっちゃったやつです

Transcript

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

   View Slide

2. Name
   @brn (ꫬꅿ⨳ⵃ)
   Occupation
   ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
   Company
   Cyberagent ،سذؙأةآؔ AI Messenger
   OSS
   Contributor of V8
   About
   http://info.b6n.ch
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. class Component extends React.Component {!
   render() {!
   return (!
   !
   {title}!
   !
   !
   {contentObservable}!
   !
   !
   !
   )!
   }!
   }!
   

   View Slide

8. import {Tags as T} from './subscriber';!
   !
   class Component extends React.Component {!
   render() {!
   return (!
   !
   {title}!
   !
   {contentObservable}!
   !
   !
   )!
   }!
   }!
   

   View Slide

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

   View Slide

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

    View Slide

11. class Subscriber extends React.Component {!
    constructor(p) {!
    super(p);!
    this.state = { vdom: null };!
    }!
    !
    render() { return this.state.vdom }!
    !
    componentDidMount() {!
    this.searchAndSubscribeObservables();!
    }!
    }!
    

    View Slide

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);!
    }!
    });!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide