web-dev-qa-db-ja.com

React機能コンポーネントの関数または太い矢印？

Reactファンクショナルコンポーネントにプレーンファンクションとファットアローを使用することの間に利点があるかどうか疑問に思わずにはいられません

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

もちろん両方とも完璧に動作しますが、それらを書くための推奨される方法はありますか？どちらかを支持する議論はありますか？

編集：私は関数の使用方法に影響を与える可能性があるプレーンなJavaScript関数（つまり、コンテキスト、スタックトレース、returnキーワードなど）の違いを認識しています。しかし、私は純粋にReactコンポーネントの観点から質問をします。

javascriptreactjsfunctionecmascript-6
11
Dispix

実際的な違いはありません。

矢印はreturnキーワードをスキップすることを許可しますが、巻き上げの恩恵を受けることはできません。これにより、関数が変数に割り当てられるため、ES6ターゲットでは冗長出力は少なくなりますが、ES5にトランスパイルすると、より冗長な出力になります。

var MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
};

オーバーヘッドは、gzip圧縮されたJSファイルではなく、6バイトであり、この考慮事項は通常無視できます。

最適化により、矢印がエクスポートされる場合、冗長性は必ずしも当てはまりません。

var MyMainComponent = (exports.MyMainComponent = function MyMainComponent() {
  return React.createElement(
    "main",
    null,
    React.createElement("h1", null, "Welcome to my app")
  );
});
4
Estus Flask

主に好みの問題です。ただし、いくつかの（マイナーな、ほとんど意味のない）違いがあります。

  • 太い矢印の構文を使用すると、前の式なしでJSXを直接返す場合に、中括弧とreturnキーワードを省略できます。 ES5関数では、_{ return ... }_が必要です。

  • ファットアロー構文はthisの新しいコンテキストを作成しませんが、ES5関数は作成します。これは、関数内でthisがReactコンポーネントを参照するようにしたい場合、またはthis.foo = this.foo.bind(this);ステップをスキップしたい場合に役立ちます。

それらの間にはより多くの違いがありますが、Reactでコーディングする場合、それらはほとんど相対的ではありません（たとえば、arguments、newを使用するなど）。

個人的なメモでは、可能な限り太い矢印の構文を使用します。その構文を好みます。

2
Chris