Upgrade to Pro — share decks privately, control downloads, hide ads and more …

preactの仕組みを理解する軽量版教育用preactを作ってる話

sadnessOjisan
November 05, 2020

 preactの仕組みを理解する軽量版教育用preactを作ってる話

preact を読みやすいように色々削りました

sadnessOjisan

November 05, 2020
Tweet

More Decks by sadnessOjisan

Other Decks in Technology

Transcript

  1. 用語の整理 ❑ Element <div>hey</div> みたいなの ❑ Component ClasComponent, Functional Component.

    Element と区別しよう ❑ 仮想DOM DOMをJSのオブジェクトで表現したもの ❑ VNode preact における仮想DOMの表現 https://blog.ojisan.io/react-component-words
  2. 主要な関数 diff 差分比較の起点。下記2つの関数を呼ぶ diffChildren Element + Component の VNode の

    新旧children を比較して、DOM ツリーの追加・削除を行う。diff を再帰的に呼ぶ diffElementNodes Element の VNode の 新旧 props を比較して、DOM Node のプロパ ティを更新する。diffChildren を再帰的に呼ぶ
  3. Component Component Component Element Element Element Element Element props 更新

    diff 更新内容の newVNode が diff に渡されて呼ばれる
  4. Component Component Component Element Element Element Element Element props 更新

    diffChildren diff 子要素を持つコンポーネ ントなので、ツリー自体 に増減があるか確かめる
  5. Component Component Component Element Element Element Element Element props 更新

    diffChildren diff Element 子要素に対して diff を取る
  6. Component Component Component Element Element Element Element Element props 更新

    diffChildren diff Element diffElementNodes 子を持たないNodeに対して 、そのNode自体の値を更新 する
  7. Component Component VNode Component Element Element Element Element Element props

    更新 function diffChildren diff Element diffElementNodes diff を再帰的に呼ぶことで、 ツリーを深く辿ることができる
  8. 必要最低限の機能だけをサポート ❑ State ❑ Props ❑ ライフサイクル ❑ componentDidMount ❑

    componentWillReceive ❑ componentWillUnMount ❑ スタイリング ❑ イベントハンドリング これだけあればなんでも(泥臭く) 作れる!! Let’s drilling props!
  9. 消した機能 ❑ Context ❑ Hooks ❑ Ref ❑ svg ❑

    dangerouslySetInnerHTML ❑ setState への関数渡し ❑ 一部ライフサイクル ❑ SSRサポート
  10. サンドボックスの作成 ❑ モノレポにした ❑ oreact を使ってアプリを作れるか確かめれる環境を作成 ❑ oreact 自体に console.log

    をしかけると、再帰的に呼ばれる diff の引数 を除き見れたりして挙動の理解がしやすい ❑ ライブラリ部分だけを publish もできる