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
3.1k
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
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
940
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
870
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
450
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
140
PicoRuby on Rails
makicamel
2
110
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
890
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Java on Azure で LangGraph!
kohei3110
0
170
Benchmark
sysong
0
270
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Why Our Code Smells
bkeepers
PRO
337
57k
For a Future-Friendly Web
brad_frost
179
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Documentation Writing (for coders)
carmenintech
72
4.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Done Done
chrislema
184
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Statistics for Hackers
jakevdp
799
220k
Designing for Performance
lara
609
69k
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כְזְךַ׃זְ