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
2.6k
Parsing Javascript
brn
12
7.4k
JSON & Object Tips
brn
1
300
CA 1Day Youth Bootcamp for Frontend LT
brn
0
690
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
610
tc39 proposals
brn
0
660
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
520
Other Decks in Programming
See All in Programming
Docker_OSS_ホスティング入門
satokoki645
0
140
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
JavaScript Closure
asoluka
0
2k
FoodGram
iseruuuuu
0
230
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
790
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
2
290
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
140
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
230
2024 コーディング研修
ckazu
2
670
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Scaling GitHub
holman
457
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Done Done
chrislema
178
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Automating Front-end Workflow
addyosmani
1357
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Designing for Performance
lara
601
67k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Atom: Resistance is Futile
akmur
260
25k
RailsConf 2023
tenderlove
9
590
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
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כְזְךַ׃זְ