ホームページ > 記事 > ウェブフロントエンド > React コンポーネントを宣言するにはいくつかの方法があります

React コンポーネントを宣言するにはいくつかの方法があります

青灯夜游オリジナル: 2021-11-25 15:34:482713ブラウズ

反応コンポーネントを宣言するには 3 つの方法があります: 1. 関数メソッドを使用してステートレスコンポーネントを定義する; 2. "React.createClass()" メソッドを使用してコンポーネントを定義する; 3. "React.Component()" を使用する" メソッドは ES6 スタイルでコンポーネントを定義します。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react がコンポーネントを宣言 (作成) する方法:

React のリリース後、さまざまな用途に応じて React コンポーネントを定義する 3 つの方法がありました。メソッド、異なるアプローチが同じ目標につながります;

3 つの具体的な方法:

#ステートレスコンポーネントの機能定義

ステートレス機能コンポーネント

ステートレス機能コンポーネントの作成は、React バージョン 0.14 以降で使用できるようになりました。これは純粋な表示コンポーネントを作成するために使用されます。純粋な表示コンポーネントは、受信したプロパティに基づいて表示のみを担当し、状態操作は関与しません。特定のステートレス機能コンポーネントについて、担当者は次のように指摘しました:

ほとんどの React コードでは、ほとんどのコンポーネントはステートレスコンポーネントとして記述されており、単純な組み合わせによって他のコンポーネントに組み込むことができます。このデザインパターンは、複数の単純なアプリケーションが 1 つの大きなアプリケーションに結合されます。

ステートレス関数コンポーネントは、形式的には、レンダリングメソッドを 1 つだけ持つコンポーネントクラスとして表現され、関数または ES6 アロー関数の形式で作成され、コンポーネントはステートレスです。具体的な作成形式は次のとおりです。

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

ステートレスコンポーネントの作成形式により、コードが読みやすくなり、多くの冗長なコードが削減されて 1 つのレンダリングメソッドのみに簡素化され、記述能力が大幅に向上します。 a コンポーネントの利便性に加えて、ステートレスコンポーネントには次の重要な機能があります:

ステートレスコンポーネントの作成形式により、コードが読みやすくなり、多くの冗長なコードが削減されます。1 つのレンダリングメソッドのみに簡素化されています。コンポーネントの作成の利便性が大幅に向上します。さらに、ステートレスコンポーネントには次の注目すべき機能があります:

# コンポーネントはインスタンス化されず、全体的なレンダリングパフォーマンスが向上します

コンポーネントは render メソッドの関数に単純化されるため、ステートレスコンポーネントであるため、コンポーネントのインスタンス化のプロセスでステートレスコンポーネントはインスタンス化されません。インスタンスは存在しません。実行中に余分なメモリを割り当てる必要はありません。最適化プロセスにより、パフォーマンスがある程度向上します。

コンポーネントはこのオブジェクトにアクセスできません
ステートレスコンポーネントにはインスタンス化プロセスがないため、コンポーネント this 内のオブジェクト (this.ref、this.state など) にアクセスできません。アクセスできます。アクセスしたい場合、このフォームを使用してコンポーネントを作成することはできません

コンポーネントはライフサイクルメソッドにアクセスできません
ステートレスコンポーネントにはコンポーネントのライフサイクル管理とステータスが必要ないため、したがって、この形式のコンポーネントの基礎となる実装では、コンポーネントのライフサイクルメソッドは実装されません。したがって、ステートレスコンポーネントは、コンポーネントのさまざまなライフサイクル管理に参加できません。

ステートレスコンポーネントは入力プロップにのみアクセスできます。同じプロップは副作用なしで同じレンダリング結果を取得します。
ステートレスコンポーネントは、次のようにすることをお勧めします。大規模なプロジェクトでは、元の巨大なコンポーネントを分割するために、できるだけ簡単に記述されますが、将来的には、React は、無意味なチェックやメモリ割り当てなど、ステートレスコンポーネントに対する一連の最適化も実行する予定なので、可能な限りステートレスコンポーネントを使用してください。

React.createClass

React.createClass は、React でコンポーネントを作成する最初の推奨方法です。これは、ES5 のネイティブ JavaScript で実装された React コンポーネントです。その形式は次のとおりです。 :

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: &#39;&#39;
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || &#39;placeholder&#39;
        };
    },
    handleChange: function(event) {
        this.setState({ //this represents react component instance
            text: event.target.value
        });
    },
    render: function() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange} value={this.state.text} />
            </div>
        );
    }
});
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

ステートレスコンポーネントと比較して、後述するReact.createClassやReact.Componentはステートフルコンポーネントを作成しており、これらのコンポーネントはインスタンス化され、コンポーネントの寿命にアクセスすることができるcycleメソッドです。しかし、React の開発に伴い、React.createClass フォーム自体の問題が明らかになりました。

React.createClass は関数メソッドを自己バインドします (メソッドをバインドするだけの React.Component とは異なります)。注意すべきこと) 関数) を使用すると、不要なパフォーマンスのオーバーヘッドが生じ、コードが陳腐化する可能性が高くなります。

React.createClass のミックスインは十分自然で直感的ではありません。React.Component フォームは、高次コンポーネント (高次コンポーネント -- HOC) に非常に適しています。より直感的な形式のミックスインより強力な機能、および HOC は純粋な JavaScript であるため、放棄されることを心配する必要はありません。 HOCについては「ステートレスコンポーネントと上位コンポーネント」を参照してください。

React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于 React.createClass可以更好实现代码复用。将上面React.createClass的形式改为React.Component形式如下：

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 设置 initial state
        this.state = {
            text: props.initialValue || &#39;placeholder&#39;
        };

        // ES6 类中函数必须手动绑定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}
InputControlES6.propTypes = {
    initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
    initialValue: &#39;&#39;
};

推荐学习：《react视频教程》

以上がReact コンポーネントを宣言するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：反応にはいくつかのフックがあります次の記事：反応にはいくつかのフックがあります

続きを見る