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

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

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

1. ステートレス機能コンポーネント<strong></strong>#ステートレス機能コンポーネント フォームの作成は、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.createClass<strong></strong>React.createClass は、react の開始時にコンポーネントを作成するための推奨される方法ですこれは ES5 のネイティブ JavaScript で実装された React コンポーネントであり、その形式は次のとおりです:

var InputControlES5 = React.createClass({
    propTypes: {//定义传入props中的属性各种类型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //组件默认的props对象
        initialValue: ''
    },
    // 设置 initial state
    getInitialState: function() {//组件相关的状态对象
        return {
            text: this.props.initialValue || 'placeholder'
        };
    },
    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.Component<strong></strong>React.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 || 'placeholder'
        };
        // 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;
};

関連学習の推奨事項:

javascript ビデオ チュートリアル

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