ReactとRxでだめなことやっちゃったやつです
ReactהRxJSד頾⫈⡲
View Slide
Name@brn (ꫬꅿ⨳ⵃ)Occupationؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،CompanyCyberagent ،سذؙأةآؔ AI MessengerOSSContributor of V8Abouthttp://info.b6n.ch
וז頾⫈?React눤何鸡׃גRxךObservable湫䱸Ⳣ椚דֹ״ֲח׃
Why?Reduxָ֮ת㥨ֹׄׯזַַ
ז頾⫈חזReact16ח،حفر٦زדֹזְPropsָObservableזךַ麩ֲךַⴻⴽדֹזְ杝荈ֺׅ
ImplementationReactח床ׅprops♧א♧אָObservableחזגֶծⰻ鿇ד䗳銲ז皘䨽ֽ،حفر٦زׁկshouldComponentUpdate䗳銲זְ剑䓼(^^)
class Component extends React.Component {!render() {!return (!!{title}!!!{contentObservable}!!!!)!}!}!
import {Tags as T} from './subscriber';!!class Component extends React.Component {!render() {!return (!!{title}!!{contentObservable}!!!)!}!}!
How to workObservableָ♧䏝SubscriberַTags穗歋ד鏣㹀ׁהծ֮הכObservableח⦼ָ崧ןחTagsַSubscriberךؒٔ،ךָ刿倜ׁObservableⰻ鿇ח⦼ָ崧ֽזךדծ鋵؝ٝه٦طٝزךcomponentWillReceivePropsכ⹛⡲׃זְ
How to implementSubscriberכstateחvdomגְגծObservableָ刿倜ׁןחsetStateㄎן⳿׃גvdom湫䱸ٖٝتؚׅٔٝ
class Subscriber extends React.Component {!constructor(p) {!super(p);!this.state = { vdom: null };!}!!render() { return this.state.vdom }!!componentDidMount() {!this.searchAndSubscribeObservables();!}!}!
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);!}!});!
Observable.combineLatest!.apply(!null,!foundObservables!.map(v => v.observable))!.subscribe(updates => {!updates.forEach(update => {!update();!})!});!
React.ElementReactךⰻ鿇דכReact.Elementָjsx♳ך1銲稆邌ׅկ
{!$$typeof: Symbol.for('react.element'),!type: 'div' | constructor,!key: key,!ref: ref,!props: props,!}!
Fastest - Mutable -React.ElementכdevelopmentדכObject.feezeׁגimmutableזؔـآؙؑزחזגְկmutableזקֲָ傍ְךדObject.freezeַ佝ׅ
Mutable React瑞ךReact.Element⡲ג$$typeof؝ؾ٦ֿׅהדծٖٖؔؔReact.Element⡲䧭ךתתSubscriber⟃♴ךchildrenח床ֿׅהדMutableזtreeָ⡲䧭דֹ
const REACT_ELEMENT_TYPEOF != React!.createElement('div', {})['$$typeof'];!!const mutableElement = {!'$$typeof': REACT_ELEMENT_TYPEOF,!...!}!
Hyper Fast UpdateSubscriberכֿךMutable Tree刿倜ָ֮皘䨽ך㢌刿׃ג䨱ׅךדծReact.Elementךⱄ⡲䧭؝أزָ0חזկ
ProblemsTypeScriptדpropsך㘗➰ֽהֹחObservableזךַPrimitiveזךַ״ַֻזְךהծSubscriberד㔲ת皘䨽כ؝٦س♳כObservableָծ㹋ꥷחכPrimitiveז⦼ָ床גֻךדPropTypesהַ֮ה㔭
!propsA={porpsA as any}!propsB={propsB as any}/>!!
ProblemsObservableכׅץגshareReplyהַךreply禸ח׃זְה⹛⡲׃זְ
Problemsprops⡲ךָ⦜♧א♧אךpropsָObservableזךדׅץגךprops嫣חreducerְזך欽䠐׃זֽלזזְ
Problems荈ⴓָ鍗גְךָObservableזךַPrimitiveזךַַזֻזגְֻ
ProblemsReactך،حفر٦زָדֹזְReact.Elementךⰻ鿇תד㢌刿׃גְךדծFiberך⚥תד鋅זְה⹛ַזְ⾱㔓ַָזְկ儗ךيت
Summary傀㶷ךך穈さׇגءٝفٕחאֻת׃׳ֲReactחRxכְזְךַ׃זְ