[解決済み] 中括弧のない矢印関数

質問

私はES6とReactの両方について初心者ですが、矢印関数をよく目にします。いくつかの矢印関数が太い矢印の後に中括弧を使用し、いくつかは括弧を使用しているのはなぜですか？ たとえば、次のようになります。

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

vs.

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

どのように解決するのですか？

括弧は1つの値を返し、中括弧は複数行のコードを実行しています。

この例は JSX を使用しているため、複数の行のように見えますが、実際には 1 つの要素にコンパイルされるだけなので、混乱しているように見えます。

同じことを行う他の例をいくつか紹介します。

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
}; 

また、オブジェクトリテラルを括弧で囲んでいるのをよく見かけますが、これはパーサーがそれをコードブロックとして扱うのを避けるための方法です。

const x = () => {} // Does nothing
const y = () => ({}) // returns an object