検索

ホームページ >ウェブフロントエンド >jsチュートリアル >React でコンポーネントを作成する 3 つの方法とその違い

React でコンポーネントを作成する 3 つの方法とその違い

不言
不言オリジナル
2018-06-30 15:09:541226ブラウズ

この記事では、React でコンポーネントを作成する 3 つの方法とその違いを主に紹介します。参考になります。

React のリリース後、さまざまなコンポーネントを定義する方法が 3 つあります。異なる方法でも同じ目標につながります:

  • 関数的に定義されたステートレスコンポーネント

  • es5 ネイティブの方法 React.createClass で定義されたコンポーネント

    • 反応コンポーネントを定義するには 3 つの方法がありますが、コンポーネントを定義するこれら 3 つの方法の違いは何でしょうか?言い換えれば、なぜ対応する定義が現れるのでしょうか?以下に簡単に紹介しましょう。

ステートレス関数コンポーネント

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

ほとんどの React コードでは、ほとんどのコンポーネントはステートレス コンポーネントとして記述されており、単純な組み合わせを通じて他のコンポーネントに組み込むことができます。これは、複数の単純なコンポーネントとマージされたコンポーネントを通じて行われます。大規模なアプリケーションが推奨されています。

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

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

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

1. コンポーネントはインスタンス化されず、コンポーネントが関数に合理化されるため、全体的なレンダリング パフォーマンスが向上します

renderメソッドを実現するには、ステートレスコンポーネントであるため、コンポーネントのインスタンス化処理にステートレスコンポーネントが存在せず、非インスタンス化処理で余分なメモリを割り当てる必要がなくなるため、ある程度のパフォーマンスが向上します。

2. コンポーネントはこのオブジェクトにアクセスできません

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

3. コンポーネントはライフサイクルメソッドにアクセスできません

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

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

。

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

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

React.createClass は関数メソッドを自己バインドします (関係する必要がある関数のみをバインドする React.Component とは異なります)。不必要なパフォーマンスのオーバーヘッドが発生し、コードが陳腐化する可能性が高くなります。

React.createClass のミックスインは十分に自然で直感的ではありません。React.Component フォームは、より直感的な形式でミックスインよりも強力な機能を示す高次コンポーネント (高次コンポーネント - HOC) に非常に適しています。 、HOC は純粋な JavaScript であるため、非推奨になることを心配する必要はありません。

  • React.Component

    • React.Component は、React でステートフル コンポーネントを作成するための現在最も推奨される方法であり、React に関連する React.createClass フォームを置き換えます。 .createClass を使用すると、コードの再利用をより適切に実現できます。上記の React.createClass の形式を、次のように React.Component の形式に変更します: 

  • 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 (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: &#39;&#39;
};

React.createClass と React.Component の違い

定義された 2 つのコンポーネントの異なる構文形式による上記のコードには、多くの重要な違いがあります。この 2 つの主な違いを以下に説明します。

Function this self-binding

React.createClassで作成されたコンポーネント、各メンバー関数のthisはいつでも関数内で直接this.methodを使用するだけで自動的にバインドされます。正しく設定してください。 

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component创建的组件，其成员函数不会自动绑定this，需要开发者手动绑定，否则this不能获取当前组件实例对象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

当然，React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。拿上例的handleClick函数来说，其绑定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //构造函数中绑定
 }
<p onClick={this.handleClick.bind(this)}></p> //使用bind来绑定
   <p onClick={()=>this.handleClick()}></p> //使用arrow function来绑定

组件属性类型propTypes及其默认props属性defaultProps配置不同

React.createClass在创建组件时，有关组件props的属性类型及组件默认的属性会作为组件实例的属性来配置，其中defaultProps是使用getDefaultProps的方法来获取默认组件属性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: &#39;&#39; 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在创建组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的静态属性来配置的。对应上面配置如下：

class TodoItem extends React.Component {
 static propTypes = {//类的静态属性
 name: React.PropTypes.string
 };
 static defaultProps = {//类的静态属性
 name: &#39;&#39;
 };
 ...
}

组件初始状态state的配置不同

React.createClass创建的组件，其状态state是通过getInitialState方法来配置组件相关的状态；

React.Component创建的组件，其状态state是在constructor中像初始化组件属性一样声明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向对象编程OOP的一种实现，其作用是为了复用共有的代码，将共有的代码通过抽取为一个对象，然后通过Mixins进该对象来达到代码复用。

React.createClass在创建组件时可以使用mixins属性，以数组的形式来混合类的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遗憾的是React.Component这种形式并不支持Mixins，至今React团队还没有给出一个该形式下的官方解决方案；但是React开发者社区提供一个全新的方式来取代Mixins,那就是Higher-Order Components。

如何选择哪种方式创建组件

由于React团队已经声明React.createClass最终会被React.Component的类形式所取代。但是在找到Mixins替代方案之前是不会废弃掉React.createClass形式。所以：

能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。

除此之外，创建组件的形式选择还应该根据下面来决定：

1、只要有可能，尽量使用无状态组件创建形式。

2、否则（如需要state、生命周期方法、ref等），使用`React.Component`这种es6形式创建组件

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Node.js中如何合并两个复杂对象的介绍

关于react-native之ART绘图的方法

以上がReact でコンポーネントを作成する 3 つの方法とその違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript node.js es6 面向对象 成员函数 构造函数 JS function 对象 constructor this
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Node.js ベースの JavaScript プロジェクト構築ツール gulp の使用方法次の記事：Node.js ベースの JavaScript プロジェクト構築ツール gulp の使用方法

関連記事

続きを見る