Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ReactとRxで負債作った
Taketoshi Aono(青野健利 a.k.a brn)
March 29, 2018
Programming
2
2.5k
ReactとRxで負債作った
ReactとRxでだめなことやっちゃったやつです
Taketoshi Aono(青野健利 a.k.a brn)
March 29, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
brn
2
390
brn
3
360
brn
0
340
brn
8
2.3k
brn
1
380
brn
0
430
brn
3
1.1k
brn
0
540
brn
0
430
Other Decks in Programming
See All in Programming
kidokidofire
1
110
scrpgil
0
110
wafuwafu13
1
170
bkuhlmann
4
300
borkdude
1
180
ickx
3
640
cc4966
1
110
yattom
32
11k
dora1998
0
180
yusuke57
0
120
matyo91
1
150
kilometer
2
270
Featured
See All Featured
danielanewman
2
560
kneath
220
15k
morganepeng
21
1.3k
lara
17
2.9k
tanoku
86
8.6k
bryan
32
3.5k
holman
288
130k
mojombo
359
62k
colly
188
14k
michaelherold
226
8.6k
samlambert
237
10k
rmw
12
870
Transcript
ReactהRxJSד 頾⫈⡲
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 About http://info.b6n.ch
וז頾⫈? React눤何鸡׃גRxךObservable湫䱸Ⳣ椚דֹ״ֲח׃
Why? Reduxָ֮ת㥨ֹׄׯזַַ
ז頾⫈חז React16ח،حفر٦زדֹזְ PropsָObservableזךַ麩ֲךַⴻⴽדֹזְ 杝荈ֺׅ
Implementation Reactח床ׅprops♧א♧אָObservableחזגֶծ ⰻ鿇ד䗳銲ז皘䨽ֽ،حفر٦زׁկ shouldComponentUpdate䗳銲זְ 剑䓼(^^)
class Component extends React.Component {! render() {! return (! <div>!
<h1>{title}</h1>! <Subscriber>! <span className={classNameObservable}>! {contentObservable}! </span>! </Subscriber>! </div>! )! }! }!
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>! )! }! }!
How to work Observableָ♧䏝SubscriberַTags穗歋ד鏣㹀ׁהծ ֮הכObservableח⦼ָ崧ןחTagsַSubscriberךؒٔ،ך ָ刿倜ׁ Observableⰻ鿇ח⦼ָ崧ֽזךדծ鋵؝ٝه٦طٝزך componentWillReceivePropsכ⹛⡲׃זְ
How to implement Subscriberכ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.Element Reactךⰻ鿇דכ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 Update SubscriberכֿךMutable Tree刿倜ָ֮皘䨽ך㢌刿׃ג䨱 ׅךדծReact.Elementךⱄ⡲䧭؝أزָ0חזկ
Problems TypeScriptדpropsך㘗➰ֽהֹחObservableזךַPrimitive זךַ״ַֻזְךהծ Subscriberד㔲ת皘䨽כ؝٦س♳כObservableָծ㹋ꥷחכ Primitiveז⦼ָ床גֻךדPropTypesהַ֮ה㔭
<Subscriber>! <MyComponent! propsA={porpsA as any}! propsB={propsB as any}/>! </Subscriber>!
Problems ObservableכׅץגshareReplyהַךreply禸ח׃זְה⹛⡲׃ז ְ
Problems props⡲ךָ⦜ ♧א♧אךpropsָObservableזךדׅץגךprops嫣חreducer ְזך欽䠐׃זֽלזזְ
Problems 荈ⴓָ鍗גְךָObservableזךַPrimitiveזךַַזֻ זגְֻ
Problems Reactך،حفر٦زָדֹזְ React.Elementךⰻ鿇תד㢌刿׃גְךדծFiberך⚥תד鋅זְ ה⹛ַזְ⾱㔓ַָזְկ 儗ךيت
Summary 傀㶷ךך穈さׇגءٝفٕחאֻת׃׳ֲ ReactחRxכְזְךַ׃זְ