Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactとRxで負債作った

 ReactとRxで負債作った

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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