岡部の自称FRPライブラリ「worldcomponent」がFacebook Reactを正しく使っておらずエラーを起こすことの確認方法

leakenokabe

岡部の自称FRPライブラリ「worldcomponent」がFacebook Reactを正しく使っておらずエラーを起こすことの確認方法

1. Chromeで http://kenokabe-techwriting.blogspot.jp/2015/05/react-html-frp.html に行きましょう
2. 下のほうのクリックカウンタまでスクロールしましょう
3. Ctrl+Shift+Iを押してから「Console」タブをクリックしましょう
4. React.unmountComponentAtNode(document.getElementById("mountpoint")); を実行しましょう。
   クリックカウンタが消えます（これは正常）
5. var mount = React.render(React.createElement(TopComponent), document.getElementById("mountpoint"));
   を実行しましょう。エラーが出て、それ以降は正常に動作しません（本来はちゃんと復活するべき）
 
原因はまさに岡部が無駄長文ブログで言い訳してるforceUpdateのせい。 
 
なお、仮にforceUpdateのエラーが起きなかったとすると4と5を繰り返すだけでメモリリークが起きるはず。
理由は、クリックカウンターの
 
  componentDidMount: function()
  {
    var com = this;
 
    ___.world = com.props.___clicks
                .compute(function(x){com.forceUpdate();});
    ___.world = ___totalClicks
                .compute(function(x){com.forceUpdate();});
  },
 
から呼び出されるworldcomponentの
 
    compute: function(f)
    {
      var f1 = function()
      {
        computingF[computingF.length] = f; //push  f
        value.val = initialVal;
      };
      return f1;
    },
 
が配列computingFに関数を追加するだけで、決して解放しないから。
 
そもそも関数型であるはずのユーザ側が、もろに命令的な再描画呼び出しを自分で登録しなきゃいけないって、
FRP以前にGUIライブラリとしてどうなのよ…

エラーが出て、それ以降は正常に動作しません（本来はちゃんと復活するべき）
原因はまさに岡部が無駄長文ブログで言い訳してるforceUpdateのせい。

なら、それはworldcomponentじゃなくて、Reactのバグだろう。
見つけたのは偉い偉い。公式レポにIssue報告しとけよ？

なお、仮にforceUpdateのエラーが起きなかったとすると4～6を繰り返すだけでメモリリークが起きるはず。

コンポーネントを意味もなくUnmount、Mountを繰り返すことなんてないが、
https://gist.github.com/anonymous/9d13ea4695c27210fd32
で、自分で
ただし、作成された配列は使われることはなく、そのうちGCに回収される。
と書いてるのに、ここで手のひら返しするような嘘をつくなよ。

・いいえ、Reactのバグではありません。エラーメッセージの英語が読めればわかるとおり、unmountしたコンポーネントに対してforceUpdateを呼び出してしまう、worldcomponentのバグです。

・動的に現れたり消えたりするUIはごく普通です。

・その記事は私ではありません。また、そこで言っている配列はmapの戻り値で、全く別の話です。

unmountするようなコードなら、コンポーネント内で、unmountイベントの処理書くべきだが、そもそもバグのないコードにあとから手つっこんで、意図的にするべきことをしないで、バグが出るように改変して、worldcomponentのバグだ、ってこれ何？頭おかしいの？

４.. React.unmountComponentAtNode(document.getElementById("mountpoint")); を実行しましょう。
クリックカウンタが消えます（これは正常）
↑
ふーん、で？

５. var mount = React.render(React.createElement(TopComponent), document.getElementById("mountpoint"));
を実行しましょう。エラーが出て、それ以降は正常に動作しません（本来はちゃんと復活するべき）
↑
えっ？
いやいや、コードに手加えるんなら、その手加えたUnmount処理もセットも「実行しましょう。」でちゃんとやっとけや、アホか、って思うだけなんだがなあ。

React組み込みのStateのFRPなら、自動で世話焼いてくれるんだろうが、独自のイベントシステム、FRP援用しているときには、Unmount処理は必要だろーが。

私は（LambadaさんのOCamlコードを本当に改変して、さらに起きてもいないメモリリークを主張した岡部さんと違って）worldcomponentもクリックカウンターも1文字たりとも改変していません。Reactアプリとして利用する、非常に単純なコードを書いただけです。

Mount/unmountは動的に現れたり消えたりするごく普通のUIに必要な、Reactの標準の機能ですから、worldcomponentが対応していないというバグですね。

1. Chromeで http://kenokabe-techwriting.blogspot.jp/2015/05/react-html-frp.html に行きましょう
2. 下のほうのクリックカウンタまでスクロールしましょう
3. Ctrl+Shift+Iを押してから「Console」タブをクリックしましょう
4. React.unmountComponentAtNode(document.getElementById("mountpoint")); を実行しましょう。
   クリックカウンタが消えます（これは正常）

クリックカウンターも1文字たりとも改変していません

あのなあ。
「一文字たりとも改変していません」で、いったいどうやって、クリックカウンターの挙動に影響を及ぼせるんだよ。
コンポーネントがアンマウントされることがあるならば、アンマウントイベント書くんだよ。
アンマウント想定されていないコンポーネントを利用するコードに手加えたのはおまえだろーが。馬鹿か？

・Reactの標準の機能を用いただけです。kenokabeさんのコードは1文字も改変していません。（kenokabeさんのブログに直にアクセスしているのに、どうやって私が改変するのでしょうか…）
・コンポーネントの対応ではなく、worldcomponentというライブラリ自体がunmountに対応していないバグです。

kenokabeさんのコードは1文字も改変していません。（kenokabeさんのブログに直にアクセスしているのに、どうやって私が改変するのでしょうか…）

だから、

Chromeで http://kenokabe-techwriting.blogspot.jp/2015/05/react-html-frp.html に行きましょう
下のほうのクリックカウンタまでスクロールしましょう
Ctrl+Shift+Iを押してから「Console」タブをクリックしましょう

でいくらでも改変できるが？
念の為だけど、コードの追加も「改変」だから。
Reactのコンポーネントは部品だが、おまえみたいに後から勝手に改変するならUnmountするなら、その処理も追加しろよ。

worldcomponentというライブラリ自体がunmountに対応していないバグです。

対応以前に、おまえUnmount処理書いてないから。

Reactの標準の機能を用いただけです

React標準の機能って何？Unmountイベント処理書いてないコンポーネントでもなんでも、自動的にそのReact標準の機能使えるようになるんだ。
へえ、じゃあなんでUnmountAPIってあるんだろうね？
Unmount処理書かれてるコードがあったり、書かれていないコードがあるんだろうね？ほら説明してみろ。

この馬鹿、あるwebアプリを構成している複雑に依存しまくってるコンポーネント郡のひとつを後から勝手にWebブラウザのConsole経由でアンマウントしてアプリがバグったら、「コードは1文字も改変していません」「Reactの標準の機能を用いただけです」「コードにはバグがありました」って言うのかね。度し難い。

・私のコードはReactの標準の機能を用いて、クリックカウンターアプリをunmountしてから再びmountしようとしているだけで、kenokabeさんのコードは1文字たりとも改変していません。

・はい、例えば https://gist.github.com/anonymous/1daf8c806939e7614c00 にある、正常な方法でReactを用いたクリックカウンターは、unmount処理は書かれていませんが、普通にunmountできます。Reactのデフォルトの機能です。

・他方、worldcomponentライブラリを用いてunmount処理を書こうにも、ライブラリ自体が対応していないので、状態を完全にリセットしてしまうか、ライブラリの実装の内部に立ち入らない限り、書けません。（これはworldcomponentが、unmountされたコンポーネントに対してもforceUpdateを呼び出してしまうせいなので、通常のライブラリであれば、そのような問題はありません。なお、基本的再確認ですが、Facebook Reactの公式マニュアル https://facebook.github.io/react/docs/component-api.html には "Normally you should try to avoid all uses of forceUpdate()" すなわち「通常はforceUpdate()のいかなる使用も避けるべきである」とあります。）

・クリックカウンターは「複雑に依存しまくってるコンポーネント郡【原文ママ】のひとつ」ではなく、比較的単純な、一まとまりのコンポーネントですね。（一まとまりでないコンポーネントをunmountしたらエラーが起こって当然ですが、クリックカウンターはまさに一まとまりのコンポーネントなので関係のない話です。）

失礼ながら、これまでのanonymous10000さんのコメントはすべて明白な誤りでしたので、今後は私の気が向いたときだけ対応させていただきたいと思います。あしからず。

P.S.　下のanonymous10000さんのコメントですが、

・「アンマウント処理しないと不整合が生じる」「リスナー解除しないとその分『メモリーリーク』する」　そのとおりです。それができないworldcomponentのバグですね。

・「アンマウント処理が必要な外部ライブラリ」が「アンマウント処理」に対応していなかったらバグですね。

・「すべてのアンマウント処理が必要な依存しているライブラリ」　いいえ、まっとうな「アンマウント処理が必要なライブラリ」は実際に「アンマウント処理」できるので、worldcomponentのようなバグは起きません。

・クリックカウンターは一まとまりの自己完結したReactアプリなのに、worldcomponentのバグのせいで、なぜか「依存関係」が解消できなくて、unmountできないということですね。

・私のコードはReactの標準の機能を用いて、クリックカウンターアプリをunmountしてから再びmountしようとしているだけで、kenokabeさんのコードは1文字たりとも改変していません。

だからReact標準以外の外部FRPライブラリ利用している場合、アンマウント処理しないと不整合が生じる、実際に生じている、って説明しているのに馬鹿だからわからないのかな。そりゃどんなイベントシステムでもリスナー解除しないとその分「メモリーリーク」するわけなんだが、話が通じないね。

・はい、例えば https://gist.github.com/anonymous/1daf8c806939e7614c00 にある、正常な方法でReactを用いたクリックカウンターは、unmount処理は書かれていませんが、普通にunmountできます。Reactのデフォルトの機能です。

おいおい、勝手に正常だのなんだの決めるなよ。おまえが出した例は、「あらゆる」アンマウント処理が必要な外部ライブラリには通用しない言い分なんだからさ。おまえの言い分が異常なの。

・他方、worldcomponentライブラリを用いてunmount処理を書こうにも、ライブラリ自体が対応していないので、状態を完全にリセットしてしまうか、ライブラリの実装の内部に立ち入らない限り、書けません。

worldcompomentライブラリに限らず、すべてのアンマウント処理が必要な依存しているライブラリな。

・クリックカウンターは「複雑に依存しまくってるコンポーネント郡【原文ママ】のひとつ」ではなく、比較的単純な、一まとまりのコンポーネントですね。

おまえがやってるのは、アンマウント処理を書かなくてもなんでもOKという話なので、同じこと。全体でも部分でも他の依存関係考慮せずに引っこ抜いたら不具合が生じるという当たり前のこと。
最初からバグがないものを、全体にしろ部分にしろ依存関係を考慮せずに引っこ抜いたらバグが出て当然なの。馬鹿だからわからないんだろうが。

失礼ながら、これまでのanonymous10000さんのコメントはすべて明白な誤りでしたので、今後は私の気が向いたときだけ対応させていただきたいと思います。あしからず。

おまえのコメントがすべて明白な誤り。こっちも気が向いたときに相手してやるよ。

P.S.　下のanonymous10000さんのコメントですが、

・「アンマウント処理しないと不整合が生じる」「リスナー解除しないとその分『メモリーリーク』する」　そのとおりです。それができないworldcomponentのバグですね。

アンマウント処理を想定していない現状のコードで、それに対応しているworldcomponentは問題はない。
お前が勝手に改変して、新たにアンマウント処理を想定した状況になれば、worldcomponenもアンマウント処理を「追加」、「拡張」するだけのことであって、何がなんでも「バグ」と印象操作したい馬鹿の存在が確認できるだけ。

・「アンマウント処理が必要な外部ライブラリ」が「アンマウント処理」に対応していなかったらバグですね。

違います。

・「すべてのアンマウント処理が必要な依存しているライブラリ」　いいえ、まっとうな「アンマウント処理が必要なライブラリ」は実際に「アンマウント処理」できるので、worldcomponentのようなバグは起きません。

繰り返し、言葉をこねくり回して「バグ」と繰り返したいだけ。
アンマウント処理が必要な局面では、それに対応するように拡張すれば事足りる。

・クリックカウンターは一まとまりの自己完結したReactアプリなのに、worldcomponentのバグのせいで、なぜか「依存関係」が解消できなくて、unmountできないということですね。

クリックカウンターは一まとまりの自己完結したReactアプリなのに、馬鹿が、ひとまとまりの自己完結したReactアプリに、アンマウント処理が必要なアンマウントを勝手にして、一まとまりの自己完結したReactアプリに対応しているライブラリに、自己完結以上の拡張処理が必要な場面を意図的に作り出して、バグだとゴネているだけ。

これでいいか？

anonymous10000の方は「馬鹿か？」とか、攻撃的な口調は辞めた方が良いと思います。「ほら説明してみろ」といった口調も、あまりお願いする側の態度ではありませんね。
匿名だからといっても、馬鹿だとか書いて良いわけでは、ありません。
ところで、あなたは岡部さんなのでしょうか？別の方でしょうか？

・僭越ながら、anonymous10000さんは最初のほうのコメントで「worldcomponentじゃなくて、Reactのバグ」と主張されたり、mapの戻り値のGCとcomputingF自体のことを混同されたりして私のことを嘘つきと批判なさいましたが、それらの誤りについて特に何かおっしゃることはないのでしょうか。（しかも後者は私が参照すらしていなかった別の方の文書を、私が書いたとanonymous10000さんが決めつけたわけですが…）

・unmountは動的HTMLフレームワークに必須のReact標準の機能なので（いらなくなったUIを非表示にするだけでは、それこそリソースがリークします）、数多くのFlux実装等もすべて対応しており、React上のFRPライブラリを自称するworldcomponentが、よもや「unmount処理」に対応していないとは思いませんでしたが了解しました。

・ここまで繰り返し何度もコメントして「worldcomponentはunmount処理に対応していないがバグではない」と主張されるぐらいならば、anonymous10000さんがworldcomponentを改良して「unmount処理」に対応させたほうが遥かに手っ取り早かったのではないかと思いましたが、それができなかった何か深いご事情があったものと推察しました。どうも何度もコメントいただきありがとうございました。

「通常はforceUpdate()のいかなる使用も避けるべきである」ということでありますが、「岡部氏のは通常ではない」ケース、というのがanonymous10000さんの主張なのでしょうね、想像ですが。
FRPライブラリもこうでなければいけない、という法令があるわけではないですし、Facebook社のいう事も岡部式ロジックでいえば「ローカルルール」なので、なんら問題はない、という主張なのだと、さらに想像します。

worldcomponentが岡部さんの主張するような「FRPライブラリ」なのか、という点に関し http://qiita.com/nonstarter/items/2763f5d85f2b8df3b18b#comment-da92ea5ddfa594e5937f という意見もありましたのでご参考にしてください。

・僭越ながら、anonymous10000さんは最初のほうのコメントで「worldcomponentじゃなくて、Reactのバグ」と主張されたり、mapの戻り値のGCとcomputingF自体のことを混同されたりして私のことを嘘つきと批判なさいましたが、それらの誤りについて特に何かおっしゃることはないのでしょうか。

混同というより、書き方が悪いんじゃない？だから誤りじゃないし特に言うことはないね。

・unmountは動的HTMLフレームワークに必須のReact標準の機能なので、数多くのFlux実装等もすべて対応しており、React上のFRPライブラリを自称するworldcomponentが、よもや「unmount処理」に対応していないとは思いませんでしたが了解しました。

unmountは動的HTMLフレームワークに必須のReact標準の機能

HTMLフレームワーク的には、単純に非表示モードにすれば事足りる。コンポーネントをアンマウントするのが必須だとは思えないし、「標準」というのは単純にそのようなAPIがある、っていう事実の誇張に過ぎないが、同じく歪曲誇張の「バグ」の連呼について、「バグではない」とやっと馬鹿が了解したのは一歩前進かもしれない。

・ここまで繰り返し何度もコメントして「worldcomponentはunmount処理に対応していないがバグではない」と主張されるぐらいならば、anonymous10000さんがworldcomponentを改良して「unmount処理」に対応させたほうが遥かに手っ取り早かったのではないかと思いましたが、それができなかった何か深いご事情があったものと推察しました。どうも何度もコメントいただきありがとうございました。

なんで俺が人のライブラリを拡張する作業せねばならんの？作者に直接言えよ。おまえがUnmount処理に対応させたいから拡張したい、ってGitHubなんだからIssue投げるか直接メールすりゃあええだろ。所詮おまえがバグと歪曲誇張を騒ぎ立てたいだけで必須でもないんだし、どうしても需要あんならてめーでやれば？

プリプリ・カリカリせずに、冷静に、大人の対応で、紳士的に話しましょうよ。なぜ、あなたは作者でもないのに、最初から喧嘩腰なのですか？ここ、説明してみてください。
「正義感」でしょうか。でも、言葉遣いには気を付けましょう。ネチケットが大事。
落ち着いて。作者には到底できないからこそ、あなたにお願いしているのかもしれません。私が、変わってお願いします。やってみてください。

「正義感」かな。大人の対応、紳士的というおまえのysm-sexっていうふざけたハンドルもムカつくし、慇懃無礼にノコノコ出てきた態度もムカつく。

高圧的な態度の理由が正義感とは随分とチャイルディッシュですね。
あなたの言う正義って、ご自分だけが納得する正義じゃないですか。
とても紳士的とは言えませんね。

皆様、コメントありがとうございます。どちらが「正義」かは読者が判断すると思いますので、ここで議論されなくても良いかと思います。

どちらが正義なのかは軽々しくは申せませんが、私はanomymous10001さんの指摘が正しいと思いますし、何より丁寧ですね。
正しさって「罵声の大きさ」で決まるものではありませんから。

どちらが正義なのかは軽々しくは申せませんが、私はanomymous10001さんの指摘が正しいと思いますし、何より丁寧ですね。
正しさって「罵声の大きさ」で決まるものではありませんから。

おいこら糞素人

すばらしい解説ありがとう