const Message = props => <div>{props.msg}</div>
と、
function Message(props) {
return (
<div>{props.msg}</div>
)
}
は同じですか?
どこかで確かめることはできますか?
違います。
通常の関数定義によって定義された関数は new
で呼び出せますが、アロー関数はできません。
var Foo = function(){};
var foo = new Foo(); // OK
var Foo = () => {};
var foo = new Foo(); // エラー
また、今回の例では出てきませんが、通常の関数とアロー関数では this
の扱いにも差があります。
より詳しくは、本家 Q&A の "Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?" や MDN の「アロー関数」をご覧ください。
(このような問題は、英語で "〇〇 vs ××" と検索すると上手く出てくるような気がします。また、最終的には仕様を読むのが良いと思います。)
const Message
は変数宣言なので、この宣言前にMessage(props)
を実行するとエラーが発生します。function Message()
は関数定義なので、この定義より前で実行しても期待通り動作します。