react.js v0.13 RC – staticsの中の’this’に注意

このエントリーをはてなブックマークに追加

Static methods (defined in statics) are no longer autobound to the component class

Reactのコンポーネントにはstaticsというものがあり、ここで定義したものはコンポーネントから直接呼び出すことができます。サンプルソースは本家のものを参照してください。

staticsで定義されたものは今までは定義したコンポーネントに「自動的」にバインドされていましたが、v0.13rc以降はバインドされなくなります。どういうことかと言うと、’this’を使った以下のJSFiddleをみてもらうとわかりやすいと思います。

MyComponentはstaticsにmessageという「文字列」とstaticMethodという「関数」を持っています。staticMethod内で「this.message」を参照しているのですが、ここで「this」が何を指すのかがポイントです。v0.13rcより前はstaticsはコンポーネントに自動的にバインドされていた為、thisはコンポーネント(この場合MyComponent)となります。よって、this.messageはMyComponent.message(つまり’Hello’)になるのです。callで明示的にcallerを指定しても、既にMyComponentにバインド済みなので’Hey!’ではなく’Hello’になります。

これがv0.13rcからは自動的にバインドされなくなるので上記と同じコードを実行した場合は、callで明示的にmessageに’Hey!’を持つcallerオブジェクトを指定しているので、出力は’Hey’に変わります。

私はまだまだ知識が浅いのでこの変化がどういう効果をもたらすのかよくわかっていないのですが、より柔軟になったのでしょうか?あるいはES6からは「()=>」で定義した関数のthisは元の所有者をキャプチャしてくれるので、React側で機能を制限しない方向にしたのでしょうかね?

Written on February 28, 2015
このエントリーをはてなブックマークに追加