際際滷

React Componentの
コンストラクタを
弖いかけて
2015/09/08 React Meetup #2
hosomichi

徭失�B初
侭奉
?Reactを試喘した�_�k�I��(5ヶ埖富？)
?インタ�`ネットﾚ御タグの�_�k
?その麿採でも(バックエンド/インフラ/Android/マネジメント)
を伏�Iとしております

React兜僥宀への
恬隈�h苧がゆるい
暴めの仁籾湖

暴めの仁籾湖
箭えば
のようなコ�`ド

いわゆるJSコンストラクタと�なる��猟に��して、
叨護尖盾?屁尖が碧俳れておらず
貧返に�h苧ができていない徭蛍がいるな�`と
暴めの仁籾湖

という�n�}を盾�Qすべく、
ソ�`スコ�`ド(0.13.3)を
弖うことでReactの�Y�箸�
尖盾を侮めつつ屁尖しました

�コンストラクタ伏撹

?坪何議にReactClass.createClassをコ�`ル
?哈方オブジェクトは坪何議にはspecと兆原け
?Constructorという兆のコンストラクタ�v方を卦抜
spec

?ES6侏のクラス協�xもコンストラクタ�v方を戻工
?貧�の��呂�HosoComponentという
コンストラクタ�v方になりますね

恷�K議に●のような
コンストラクタ�v方が竃栖貧がります
☆宴卷貧Componentコンストラクタ、
�g悶をComponentインスタンスと柵びます
Constructor
prototype
spec

廣)specはprototypeに�{められます。
specのメンバは畠てのComponentインスタンスでア
クセス辛嬬?慌嗤されます。
Constructor
prototype
spec
prototype

�檎艶温界岳掘鉛艶馨艶稼岳伏撹

?坪何議にはReactElement.createElementをコ�`ル
?Componentコンストラクタ?propsを鞭け函り
ReactElementインスタンスを卦す
JSXと�v方コ�`ル(やっていることは揖じ)

?伏撹されたReactElementは●のような湖じです
?及匯哈方に峺協したComponentコンストラクタは
typeというメンバに�{められます
ReactElementインスタンス
type
key
props
ref

ところで、まだコンストラクタは
�g佩されていませんよね???
どこでコンストラクトしてるのか???
わくわく?

�檎艶温界岳.姻艶稼糸艶姻

?哈方にReactElementとコンテナ勣殆を鞭け函って
鮫中宙鮫を�g佩
?��､箸靴�Componentコンストラクタの
�Y惚�､任△襯ぅ鵐好織鵐垢魴気�

render垢殻の祇のりは�Lいのですが???
ReactMount
ReactUpdate
ReactReconciler
ReactCompositeComponent

ReactCompositeComponent.mountComponent
にてインスタンスを伏撹していました

ここでReactElementに局したpropsが哈方となり
インスタンスごとの耕嗤デ�`タもここで秘ります

∠恷瘁にthisについて
このthisはComponentインスタンスそのものと
いうことでした

�createClassはComponentコンストラクタを伏撹
�ReactElementはコンストラクタとprops/key/refを�~原けたデ�`タ��夛
�ComponentインスタンスはReact.render嶄に伏撹される
∠renderメソッドなどの坪何のthisはComponentインスタンスそのもの
�
∠
��

React componentのコンストラクタを弖いかけて

際際滷

React componentのコンストラクタを弖いかけて

Recommended

More Related Content

What's hot (20)

Similar to React componentのコンストラクタを弖いかけて (20)

React componentのコンストラクタを弖いかけて