反応コンポーネントを宣言するには 3 つの方法があります: 1. 関数メソッドを使用してステートレス コンポーネントを定義する; 2. "React.createClass()" メソッドを使用してコンポーネントを定義する; 3. "React.Component()" を使用する" メソッドは ES6 スタイルでコンポーネントを定義します。
このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。
react がコンポーネントを宣言 (作成) する方法:
React のリリース後、さまざまな用途に応じて React コンポーネントを定義する 3 つの方法がありました。メソッド、異なるアプローチが同じ目標につながります;
3 つの具体的な方法:
- #ステートレス コンポーネントの機能定義
#React.createClass( ) コンポーネントの定義
ステートレス機能コンポーネント
ステートレス機能コンポーネントの作成は、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: ''
},
// 设置 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: ''
};ログイン後にコピー
ステートレスコンポーネントと比較して、後述する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 || '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: ''
};ログイン後にコピー
推荐学习：《react视频教程》
以上がReact コンポーネントを宣言するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
