React コンポーネントを宣言するにはどのような方法がありますか?-jsチュートリアル-php.cn

React コンポーネントを宣言するにはどのような方法がありますか?

coldplay.xixi

リリース： 2020-11-20 09:33:01

オリジナル

2769 人が閲覧しました

反応コンポーネントの宣言方法: 1. 機能的に定義されたステートレスコンポーネント; 2. es5 ネイティブの方法で定義されたコンポーネント [React.createClass]; 3. es6 フォームで定義されたコンポーネント [extends React.Component] 。

React コンポーネントを宣言するにはどのような方法がありますか?

#react コンポーネントの宣言メソッド:

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

ほとんどの React コードでは、ほとんどのコンポーネントはステートレスコンポーネントとして記述されており、単純な組み合わせによって他のコンポーネントに構築できます;

この設計パターンは複数の単純なアプリケーションを 1 つの大きなアプリケーションに結合することによって提唱されています。

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

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

ログイン後にコピー

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

コンポーネントは render メソッドの関数に単純化され、ステートレスコンポーネントであるため、ステートレスコンポーネントはコンポーネントのインスタンス化のプロセスに含まれず、非インスタンス化プロセスで余分なメモリを割り当てる必要がなく、パフォーマンスが向上します。 . 一定の改善が得られます。
ステートレスコンポーネントにはインスタンス化プロセスがないため、コンポーネント this 内のオブジェクト (this.ref、this.state など) にアクセスできません。アクセスできます。アクセスしたい場合は、このフォームを使用してコンポーネントを作成することはできません
ステートレスコンポーネントにはコンポーネントのライフサイクル管理とステータスが必要ないため、したがって、この形式のコンポーネントの基礎となる実装では、コンポーネントのライフサイクルメソッドは実装されません。したがって、ステートレスコンポーネントは、コンポーネントのさまざまなライフサイクル管理に参加できません。
ステートレスコンポーネントは大規模なプロジェクトで推奨されます。単純な記述を使用するようにしてください。将来的には、React はステートレスコンポーネントに対しても、無意味なチェックやメモリ割り当てなどの一連の最適化を実行するようになるため、可能な限りステートレスコンポーネントを使用するようにしてください。

2. React.createClassReact.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 は作成されたすべてのステートフルコンポーネントはインスタンス化され、コンポーネントのライフサイクルメソッドにアクセスできるコンポーネントです。しかし、React の開発に伴い、React.createClass フォーム自体の問題が明らかになりました。 React.createClass は関数メソッドを自己バインドします (関係する必要がある関数のみをバインドする React.Component とは異なります)。その結果、不必要なパフォーマンスのオーバーヘッドが発生し、コードが陳腐化する可能性が高くなります。

React.createClass の

mixins

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

3. React.ComponentReact.Component は、現在 React によって強く推奨されている ES6 形式で反応コンポーネントを作成します。ステートフルコンポーネントを作成すると、最終的には 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;
};

ログイン後にコピー