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
preactの仕組みを理解する軽量版教育用preactを作ってる話
Search
sadnessOjisan
November 05, 2020
Technology
4
3.2k
preactの仕組みを理解する軽量版教育用preactを作ってる話
preact を読みやすいように色々削りました
sadnessOjisan
November 05, 2020
Tweet
Share
More Decks by sadnessOjisan
See All by sadnessOjisan
React のルーター事情
sadnessojisan
1
340
PHPこそ OpenTelemetry が嬉しい
sadnessojisan
2
300
TypeScript、上達の瞬間
sadnessojisan
51
18k
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
740
疎通2024
sadnessojisan
5
1.6k
BasicBasic認証
sadnessojisan
5
4.4k
ISUCON入門以前_ISUNARABE_LT#1
sadnessojisan
20
5.8k
サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024
sadnessojisan
36
15k
Node.js v12 を使い続けていたのはなぁぜなぁぜ?
sadnessojisan
11
28k
Other Decks in Technology
See All in Technology
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
290
SREのためのeBPF活用ステップアップガイド
egmc
2
930
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
350
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
2.2k
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
290
ロールが細分化された組織でSREは何をするか?
tgidgd
1
210
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
230
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
200
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
220
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.5k
shake-upを科学する
rsakata
7
930
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
We Have a Design System, Now What?
morganepeng
53
7.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Speed Design
sergeychernyshev
32
1k
Scaling GitHub
holman
460
140k
RailsConf 2023
tenderlove
30
1.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
仮想DOMの仕組みを理解する 軽量版教育用 preact 〜俺の React、oreactを作った話〜 Yuta Ide (@sadnessOjisan) #new_style_study
自粛期間にしていたこと ❑ preact 読んでた https://blog.ojisan.io/preact-reading
preact とは ❑ 軽量版React, Reactのサブセット ❑ React と異なる実装だが、同一の機能・同一のインターフェースを 持つ ❑
後発のライブラリであり、比較的読みやすい
2分でわかる preact
用語の整理 ❑ Element <div>hey</div> みたいなの ❑ Component ClasComponent, Functional Component.
Element と区別しよう ❑ 仮想DOM DOMをJSのオブジェクトで表現したもの ❑ VNode preact における仮想DOMの表現 https://blog.ojisan.io/react-component-words
preact の責務 ❑ 仮想DOMからDOMツリーを構築 ❑ 新旧の仮想DOMを比較して差分をDOMに反映
Node Node Node Node Node Node diff(dom, newVNode, oldVNode)
主要な関数 diff 差分比較の起点。下記2つの関数を呼ぶ diffChildren Element + Component の VNode の
新旧children を比較して、DOM ツリーの追加・削除を行う。diff を再帰的に呼ぶ diffElementNodes Element の VNode の 新旧 props を比較して、DOM Node のプロパ ティを更新する。diffChildren を再帰的に呼ぶ
どのように diff が取られるか
Component Component Component Element Element Element Element Element props 更新
Component Component Component Element Element Element Element Element props 更新
diff 更新内容の newVNode が diff に渡されて呼ばれる
Component Component Component Element Element Element Element Element props 更新
diffChildren diff 子要素を持つコンポーネ ントなので、ツリー自体 に増減があるか確かめる
Component Component Component Element Element Element Element Element props 更新
diffChildren diff Element 子要素に対して diff を取る
Component Component Component Element Element Element Element Element props 更新
diffChildren diff Element diffElementNodes 子を持たないNodeに対して 、そのNode自体の値を更新 する
Component Component VNode Component Element Element Element Element Element props
更新 function diffChildren diff Element diffElementNodes diff を再帰的に呼ぶことで、 ツリーを深く辿ることができる
Props の更新で diff が発火する仕組み setState
setState renderComponent diff setState が呼ばれるとdiff が呼ばれるため 再レンダリングが起きる 次の状態をComponentの _nextStateに保存 diff
を呼び出す _nextState を取り出す
setState renderComponent diff setState が呼ばれるとdiff が呼ばれるため 再レンダリングが起きる props が変わったら再レンダリング ↓
propsを監視しているわけではない!
setState が呼ぶ方法 lifecycle Eventハンドラからも呼び出せますが、preact成分は薄いので省きます
diff diffChildren diffElementNodes preact が diff中、diff後に実行してくれる commitRoot ライフサイクルの実行 renderQueueにライフサイ クルイベントの追加
renderQueueのイベントを 実行
preact とは ❑ 軽量版React, Reactのサブセット ❑ React と異なる実装だが、同一の機能・同一のインターフェースを 持つ ❑
後発のライブラリであり、読みやすい
本当に読みやすい? ❑(比較的)読みやすい ❑ランタイムにおける最適化や行数の節約が意識されていたり、多少の 可読性は失われている ❑変数の再代入 ❑オブジェクトの破壊 ❑型が合わない ❑クラスを使わない ❑適当すぎる変数名 (i,
j に Vnode を代入) ❑tmp にいろいろなもの渡して使いまわしてる ❑相互再帰 ❑条件節での代入 ❑条件節での副作用 ❑ For me 読みにくい!
というわけで、 読みやすい教育用 preact を作る
俺でも読める preact oreact https://github.com/sadnessOjisan/oreact
必要最低限の機能だけをサポート ❑ State ❑ Props ❑ ライフサイクル ❑ componentDidMount ❑
componentWillReceive ❑ componentWillUnMount ❑ スタイリング ❑ イベントハンドリング これだけあればなんでも(泥臭く) 作れる!! Let’s drilling props!
消した機能 ❑ Context ❑ Hooks ❑ Ref ❑ svg ❑
dangerouslySetInnerHTML ❑ setState への関数渡し ❑ 一部ライフサイクル ❑ SSRサポート
引数をオブジェクトで渡す ❑ 引数の数が多い ❑ 再帰的に呼ぶ関数がいくつかあり、どの状態になった引数が渡され るかを知りたい
型をつける ❑ 本家は JSDoc に型を書いている ❑ それをもとにTSで書き直す ❑ 型が合わない・・・ ❑
一旦は後回しにしてドキュメントだけ充実させる
サンドボックスの作成 ❑ モノレポにした ❑ oreact を使ってアプリを作れるか確かめれる環境を作成 ❑ oreact 自体に console.log
をしかけると、再帰的に呼ばれる diff の引数 を除き見れたりして挙動の理解がしやすい ❑ ライブラリ部分だけを publish もできる
https://sadnessojisan.github.io/oreact/
今後の目標 ❑ 変数の再代入を直したい ❑ 意味を持たない変数名に名前を適切な名前を与えたい ❑ 型を合わせたい これに対応しようとすると、結局は書き直しに なりそう。書き直したものは preact
と呼べる のか? 本当の意味で 俺の react になりそう