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.3k
JSON & Object Tips
brn
1
500
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
690
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
260
slogパッケージの深掘り
integral0515
0
150
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
980
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
20250708_JAWS_opscdk
takuyay0ne
2
150
AI Ramen Fight
yusukebe
0
110
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
460
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Bash Introduction
62gerente
613
210k
Scaling GitHub
holman
461
140k
Building Adaptive Systems
keathley
43
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Statistics for Hackers
jakevdp
799
220k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Practical Orchestrator
shlominoach
189
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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כְזְךַ׃זְ