React の機能的なステートレス コンポーネント、PureComponent、Component の違いは何ですか。また、いつ何を使用すればよいですか。質問する

また、独自の実装shouldComponentUpdateや拡張はPureComponent最適化であり、通常どおり、パフォーマンスの問題がある場合のみ検討を開始する必要があります（早すぎる最適化を避ける)。経験則として、私は常に、アプリケーションが動作状態になり、ほとんどの機能がすでに実装された後に、これらの最適化を行うようにしています。パフォーマンスの問題が実際に邪魔になったときに、それに集中する方がはるかに簡単です。

詳細情報

機能的なステートレス コンポーネント:

これらは関数を使用して定義されます。ステートレス コンポーネントには内部状態がないため、出力 (レンダリングされる内容) はこの関数への入力として指定されたプロパティのみに依存します。

長所:

• React でコンポーネントを定義する最も簡単な方法です。状態を管理する必要がない場合は、クラスや継承に煩わされる必要はありません。関数とクラスの主な違いの 1 つは、関数の場合、出力が入力のみに依存する (以前の実行履歴には依存しない) ことが確実であることです。

• 理想的には、アプリでは、できるだけ多くのステートレス コンポーネントを持つことを目指す必要があります。これは通常、ロジックをビュー レイヤーの外側に移動し、それを redux のようなものに移動することを意味し、何もレンダリングせずに実際のロジックをテストできることを意味します (テストがはるかに簡単になり、再利用性が向上します)。

短所:

• ライフサイクル メソッドはありません。他のフレンドを定義する方法はありませんcomponentDidMount。通常は、階層の上位にある親コンポーネント内でこれを実行し、すべての子をステートレスなものに変えることができます。

• を定義できないため、再レンダリングが必要かどうかを手動で制御する方法はありませんshouldComponentUpdate。コンポーネントが新しいプロパティを受け取るたびに再レンダリングが行われます (浅い比較などを行う方法はありません)。将来的には、React はステートレス コンポーネントを自動的に最適化できるようになりますが、現時点では使用できるライブラリがいくつかあります。ステートレス コンポーネントは単なる関数であるため、基本的には「関数のメモ化」という古典的な問題です。

• 参照はサポートされていません:https://github.com/facebook/react/issues/4936

PureComponent クラスを拡張するコンポーネント VS Component クラスを拡張する通常のコンポーネント:

React には、構文をPureRenderMixin使用して定義されたクラスにアタッチできる がありReact.createClassました。ミックスインは、shouldComponentUpdate次のプロパティと次の状態の間で浅い比較を実行して、何か変更があったかどうかを確認する を定義するだけです。何も変更がない場合は、再レンダリングを実行する必要はありません。

ES6 構文を使用する場合、ミックスインは使用できません。そのため、便宜上、React は をPureComponent使用する代わりに を継承できるクラスを導入しましたComponent。は と同じようにPureComponent実装するだけです。これは主に利便性のためであり、自分で実装する必要はありません。現在の状態/次の状態とプロパティの浅い比較は、パフォーマンスをすばやく向上できる最も一般的なシナリオである可能性があります。shouldComponentUpdatePureRendererMixin

例：

class UserAvatar extends Component {
    render() {
       return <div><img src={this.props.imageUrl} /> {{ this.props.username }} </div>
    }
} 

class AvatarComponent extends Component {
    expandAvatar () {
        this.setState({ loading: true });
        sendAjaxRequest(...).then(() => {
            this.setState({ loading: false });
        });
    }        

    render () {
        <div onClick={this.expandAvatar}>
            <img src={this.props.username} />
        </div>
    }
}

class AvatarComponent extends Component {
    render () {
        <div onClick={this.props.onExpandAvatar}>
            {this.props.loading && <div className="spinner" />}
            <img src={this.props.username} />
        </div>
    }
}