Reactコードリーディング #4

Open
fand opened this Issue Dec 5, 2016 · 4 comments

Projects

None yet

1 participant

@fand
fand commented Dec 5, 2016

親issue: #2

@fand
fand commented Dec 5, 2016

v0.0.0 2016-11-07

  • 読んだファイル
    • package.json
    • Gruntfile.js
    • build/node_modules/ReactComponent.js
    • build/node_modules/ReactClass.js
  • わかったこと
    • src/ の構造は複雑だけど build/ は割と単純
    • ReactComponent には setState forceUpdate しか生えてない
    • deprecatedなメソッドには、warnしてundefinedを返すgetterを Object.defineProperty で定義している
    • ReactClassReactComponent を継承している
    • ReactClassInterface には DEFINE_MANY といった specPolicy ?が定義されている
@fand
fand commented Dec 5, 2016

v0.0.1 2016-11-16

  • git grep 'componentDidMount' src | ag -v 'test.js' したところ、 ReactMount と ReactCompositeComponent が怪しそう
    • ReactMount はなんかうまく読めなかったのでスルー
    • ReactCompositeComponent を見てみる

ReactCompositeComponent

mountComponent

  • inst (instance) と this を対応付ける (L265)
    • ReactCompositeComponent は内部表現
    • ReactInstanceMap は Map かと思いきや、 key となるオブジェクトに value を生やすという方法で実装されてる (ソース)
      • mozaic.fmのconstさんの回で言ってた Symbol の実装法と似てる気がする
  • Component が ReactComponent のとき shouldConstruct(Component) === true
  • 処理の流れ
    • props, context, refs, state などを初期化して、 (L257-L340)
    • componentWillMount を呼んで、 (L344)
    • markup を作って、 (L363)
    • componentDidMount を呼んで、 (L382)
    • callbacks を呼んで、 (L387)
    • markup を返す
  • markup は performInitialMount で作られる HTML 文字列 (L507)
    • _renderValidatedComponentReactReconciler.mountComponent を呼ぶ
    • renderedElement = inst.render()
    • ReactReconciler.mountComponent は child.mountComponennt を呼ぶ
      • child は this._instantiateReactComponent で手に入る (L521)
      • 実装は instantiateReactComponent.js にある
  • [instantiateReactComponent] (https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/instantiateReactComponent.js) は、 ReactNode を受け取って instance を返す
    • instance は new element.type(element), ReactHostComponent, ReactEmptyComponent or ReactCompositeComponent で作られる
  • ReactHostComponent.create*** を呼ぶためには、予め injectGenericComponentClass などが呼ばれている必要がある
  • git grep 'injectGenericComponentClass' すると、各 renderer ごとに inject していることがわかる
  • ReactDOMStackInjection をみると、 ReactDOMComponent を inject していた

つまり、mountComponent は、最終的に ReactDOMComponent の mountComponent を呼ぶ!!!!!!!

会話ログ


amagitakayosi	[7:06 PM]  
https://github.com/lerna/lerna
 
[7:09]  
src/renderers/dom/stack/client/ReactMount.js みたいなやつみてる

amagitakayosi	[7:16 PM]  
https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/Transaction.js#L59

[7:16]  
かっこいい

[7:19]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L92
 
[7:23]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181-399 

[7:23]  
↑核心っぽい

amagitakayosi	[7:29 PM]  
ReactInstanceMap, Mapかと思いきやkeyにvalue生やしてかっこいい https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/shared/ReactInstanceMap.js#L42

[7:32]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L507

[7:32]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/stack/reconciler/ReactReconciler.js#L40

pastak	[7:36 PM]  
https://github.com/facebook/react/blob/master/src/renderers/shared/stack/reconciler/instantiateReactComponent.js#L68

amagitakayosi	[7:36 PM]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/shared/stack/reconciler/instantiateReactComponent.js

[7:40]  
https://github.com/facebook/react/blob/f705adb5993de0ff4693017b7017385dc0afa40c/src/renderers/dom/stack/client/ReactDOMStackInjection.js#L42

[7:42]  
ReactDOMComponentに帰ってきた!!

[7:44]  
めでたい

bouzuya	[7:56 PM]  
muumuu

amagitakayosi	[8:01 PM]  
俺達の知ってるDOMの世界に帰ってこれた

[8:01]  
日帰り旅行っぽい
@fand
fand commented Dec 5, 2016

v0.0.1後の調査メモ

  • ReactCompositeComponent.prototype.updateComponent は componentWillReceiveProps, shouldComponentUpdate を呼ぶ
  • ReactDOMComponent.prototype.mountComponent は DOMLazyTree などを使いつつHTML文字列を生成する
  • ReactMount もっかい読んでみた

ReactMount

というわけで、こちらも ReactDOMComponent には辿りつけそう

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment