React コンポーネントでのアロー関数の使用

1. React クラス コンポーネントのアロー関数
2. React 機能コンポーネントのアロー関数
3. React のアロー関数の構文
4. React でアロー関数を使用する利点

アロー関数は JavaScript に最近追加されたものですが、すでに何百万人もの開発者が JavaScript コードを書く方法を変えています。

ご存知かもしれませんが、React Web アプリケーションは複数のコンポーネントで構成されています。 多くの場合、コンポーネントは再利用されます。 たとえば、e コマース ストアには、<Product> 子コンポーネントのインスタンスが複数ある場合があります。

React クラス コンポーネントのアロー関数

React では、クラス構文を使用してコンポーネントを定義できます。 React で this キーワードを使用する場合は、コンストラクターでバインドする必要があります。 それ以外の場合、this キーワードを参照する通常の関数は undefined を返します。

コード：

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick(e) {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Log to the console</button>;
  }
}

通常の関数で this キーワードを参照する必要がある場合は、コンストラクターにバインドする必要があります。 これを行わないと、handleClick() 関数は App コンポーネントをコンソールに記録せず、undefined になります。

クラス コンポーネント内のアロー関数の動作は異なります。 this キーワードを使用する方がはるかに簡単です。

キーワードは、アロー関数が存在する環境、<App> コンポーネント自体を参照します。 たとえば、上記のコンポーネントを少し書き直すと、動作が大幅に変わる可能性があります。

コード：

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <button onClick={(e) => console.log(this)}>Log to the console</button>
    );
  }
}

CodeSandbox のライブ デモ を開いてボタンをクリックすると、コンソールにクラス コンポーネントが表示されます。

React 機能コンポーネントのアロー関数

機能コンポーネントには this キーワードがないため、矢印と通常の構文の違いははるかに小さくなります。 機能コンポーネントでは、アロー関数は React でイベント ハンドラーを記述するためのよりクリーンで簡潔な方法です。

この関数は、JavaScript でインライン イベント ハンドラを記述するために機能コンポーネントでよく使用されます。 例を見てみましょう：

export default function App() {
  return (
    <div className="App">
      <button onClick={() => alert("hello!")}>Create an alert</button>
    </div>
  );
}

アロー関数を変数に格納し、これらのイベント ハンドラーを props として渡すこともできます。

export default function App() {
  const handler = () => console.log("An example string");
  return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

機能コンポーネントをアロー関数として記述することもできます。

const App = () => {
    return (
    <div className="App">
      <ChildComponent handler={handler} />
    </div>
  );
}

React のアロー関数の構文

React は JavaScript ベースのライブラリです。 したがって、JSX の外部でアロー関数を使用できます。

React コンポーネントでアロー関数を使用するための構文は非常に単純です。 引数を取らず、1つの式を返すアロー関数の簡単な例を見てみましょう。

const arrowFunction = () => 2+2

この場合、関数定義への参照を arrowFunction 変数に保存しました。

この関数はパラメータを取りません。そのため、空の括弧 () を使用し、その後に関数の引数とその本体の間に矢印 => を置きます。 関数本体が 1 行に 1つの式のみである場合は、中かっこを使用して関数本体を区切る必要はありません。

また、return ステートメントを明示的に記述する必要はありません。 それは暗示されています。 上記の関数は、2+2 式の結果を返します。

1つのパラメーターを渡す場合

アロー関数の構文は、上記のパターンに従いますが、わずかな違いがあります。 例を見てみましょう：

const arrowFunction = argument => argument+2

パラメータを 1つだけ渡す場合は、括弧で囲むか、使用をスキップできます。 いずれにせよ、アロー関数は機能します。

複数のパラメータを渡す場合

複数のパラメーターを渡す場合は、それらを括弧で囲む必要があります。

const arrowFunction = (argumentOne, argumentTwo) => argumentOne+argumentTwo

多くのアイテムを含む配列を持ち、スプレッド演算子を使用してそれらを一度に渡すことができます。

const args = [5,10]
const arrowFunction = (...args) => argumentOne+argumentTwo

複数のステートメントを使用する場合

では、もう少し複雑なアロー関数を見てみましょう。 React で作成するほとんどの関数の本体には、複数の行に複数のステートメントが含まれています。

複数のステートメントでアロー関数を記述する場合は、関数本体を中かっこで囲む必要があります。

const arrowFunction = (argumentOne, argumentTwo) => {
    console.log("doing calculation")
    return argumentOne+argumentTwo
    }

この場合、return ステートメントも明示的に記述する必要があります。

React でアロー関数を使用する利点

アロー関数には、React における多くの利点があります。 おそらく最大のものは、React で機能コンポーネントを作成するためのより簡単な構文を提供することです。 アロー関数を使用して、単純なコンポーネントを数分で定義できます。

アロー関数は、クラス コンポーネントのコールバックとしても簡単に使用できます。 アロー関数は関数本体内で this の値を変更しないため、this キーワードに関連するバグを防ぐことがよくあります。 常にクラスのインスタンスを参照します。

それ以外の場合、アロー関数を使用すると、多くの単純なインライン イベント ハンドラーとコールバック関数を記述する時間を節約できます。