Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactとRxで負債作った
Search
Taketoshi Aono(青野健利 a.k.a brn)
March 29, 2018
Programming
2
3k
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)
document.write再考
brn
6
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
120
DROBEの生成AI活用事例 with AWS
ippey
0
140
バッチを作らなきゃとなったときに考えること
irof
2
470
CI改善もDatadogとともに
taumu
0
180
GAEログのコスト削減
mot_techtalk
0
120
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
Jakarta EE meets AI
ivargrimstad
0
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Why Our Code Smells
bkeepers
PRO
336
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Producing Creativity
orderedlist
PRO
344
40k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Fireside Chat
paigeccino
34
3.2k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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כְזְךַ׃זְ