質問: (e) => { this.setState({ count: this.state.count + 1 }); // 上の setState() の記述は好ましくないようです(詳しくは回答を参照ください) }; render() { return( {this.state.count} ); } } ``` このコードの`onClick`の部分を以下のように変更したとします。 ``` - + this.handleClick(e)}> ``` ちなみにどちらのコードでも同じ結果になります。 Web上で様々なサンプルコードなどを見ていると、 上の記述も下の記述も両方よく見かけるような気がします。 そのとき、ふとこれらの記述に何か違いがあるのかと疑問に思ったしだいです。 もちろん渡せる引数を変更できるという点で違いがあるかと思いますが、 今回は内部的に何か動作に違いがあるかを知りたいです。よろしくお願いいたします。
回答: JS的には殆ど同様です。 ``` var hoge = it => it + 3; // 方法1 console.log(hoge(3)); // 6 // 方法2 console.log((it => hoge(it))(3)); // 6 ``` 即興のアロー関数を1個用意してネストさせている以上の違いはありません。 他にあげるとすれば関数呼び出しの回数が増えて遅くなるくらいですかね。 JSの関数呼び出しはほぼ無視出来るコストらしいですが...... JSでは関数を作るとthisの指している箇所が変わりますが、 アロー関数はthisを作らないので、質問文の内部で平然とthis.handleClickのプロパティを取りに行って関数を叩いているのが確認できます。 【追記】reactの場合 ただしReactの内部で使う時は話が変わってきます。 Handling Events - Reactによると、 親子関係を結ぶ時は再更新処理が増えるので注意しましょうとのことです。 仕組みはこうです。 ``` var a = it => it + 3; var b = it => it + 3; console.log(a == b); // false var c = {}; var d = {}; console.log(c == d); ``` 一見全く同じものにしか見えませんが、 Array、Object、Functionは作成する度に別オブジェクトとして見えないIDが割り振られ別個のものとして認識されます。 Reactの仕組み上、renderは何度も叩かれて毎回別の関数が生まれてしまうので、 親のコンポーネントは前回のDOMと今回のDOMが同一であることが分からなくなってしまうようですね。 即興のアロー関数ではなく、何か固定化した関数をはめ込むのがオススメだよと記載されています。