では次は Reactコンポーネントでの「アロー関数」と「通常メソッド」の混在例 を見てみましょう。Reactはイベント処理が多いので、この違いが特に重要になります。
例：カウンターコンポーネント
import React from "react";
class Counter extends React.Component {
state = { count: 0 };
// ✅ アロー関数：イベントハンドラ（thisを固定したい）
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
// ✅ 通常メソッド：共通処理（インスタンス間で共有できる）
reset() {
this.setState({ count: 0 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleIncrement}>+1</button>
<button onClick={() => this.reset()}>Reset</button>
</div>
);
}
}
export default Counter;
ポイント解説
- handleIncrement（アロー関数）
onClickに直接渡すので、thisが固定されている必要がある。- アロー関数にすることで
bind(this)が不要になる。
- reset（通常メソッド）
- イベントに直接渡さず、
onClick={() => this.reset()}のように呼び出す。 - インスタンス間で共有できるので効率的。
- イベントに直接渡さず、
✅ まとめ（Reactでの使い分け）
- イベントハンドラ → アロー関数
thisを固定できるので安全。
- 共通処理やロジック → 通常メソッド
- インスタンス間で共有でき、メモリ効率が良い。
👉 こうして「イベント処理はアロー関数」「共通処理は通常メソッド」と分けると、Reactコンポーネントもスッキリ書けます。