ReactとRxで負債作った

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כְ׵זְךַ׮׃׸זְ