Tweet
Tweet

Slide 1

Slide 1 text

ReactהRxJSד 頾⫈׾⡲׏׋

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

class Component extends React.Component {! render() {! return (!
!

{title}

! ! ! {contentObservable}! ! !
! )! }! }!

Slide 8

Slide 8 text

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

{title}

! ! {contentObservable}! !
! )! }! }!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

! ! !

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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