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

ReactとRxで負債作った

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