👆🏽 🔙 🍆 （擬似）ReactJSコンポーネントの継承 💡 🏣 👉🏼

ReactJSの継承の問題をどのように解決したかについての短い投稿を書きたいと思います。通常、フォーラムでは、人々は機能を継承するためにミックスインを使用することを勧めますが、私の意見では、これは完全に正しいわけではありません。それでも、特性/ミックスインとクラスは同じものではなく、多重継承の可能性があるとしても、そのような事件が発生する可能性があります：

var A = { doStuff (){} } var B = { doStuff (){} } var C = React.createClass({ mixins: [A, B] }); //... ,   React      doStuff

さらに、ミックスインでは、メソッドオーバーライドのような標準的なOOP連続チップを作成できません。

 var A = { doStuff (){} } var C = React.createClass({ mixins: [A], doStuff (){ //,   } });

もちろん、これがなければ、機能の拡張は「アダルト」OOP言語のようには機能しません。

 doStuff (){ super.doStuff() //  }

もちろん、ES6クラスはこの問題を解決し、ReactJSチームはブログの投稿から判断してこれを準備していますが、ES6は再来するのを待たなければならず、ES6サポートのない古いInternet Explorerがなくなるまで待たなければなりません

そこで、私自身が使用する別の方法を提供したいのですが、そのためには次のものが必要になります。

1）モジュール/依存関係のシステム：RequireJS / Browserify / WebPack /これはまだそこにあります。 JavaScriptモジュールを使用していない/わからない場合は、今すぐ調べてください。

2）jQuery.extend、_。extendなど、オブジェクトのディープコピー用の関数/ lib

そこで、次のようにコンポーネントのモジュールを作成します。

 var React = require('react'); var Human = { whoAreYou (){ return "I'm a human"; } whatDoYouDo (){ return "I'm just chilling"; } render (){ return ( <h1>{this.whoAreYou()}<small>{this.whatDoYouDo()}</small></h1> ) } } module.exports = { Class: Human, Component: React.createClass(Human) }

秘Theは、コンポーネントだけでなく、このコンポーネントの作成元の「クリーン」オブジェクトもエクスポートすることです。そのため、<Human />コンポーネントのみを使用する必要がある場合、モジュールのエクスポートからComponentフィールドを取得します。

 var Human = require('human').Component;

しかし、モジュールから継承する必要があり、ここで楽しい部分が始まる場合、クラスフィールドを使用します。

 var React = require('react'); var Parent = require('human').Class; var Programmer = {}; jQuery.extend(true, Programmer, Parent, { whoAreYou (){ return Parent.whoAreYou.apply(this) + " and a programmer";//   ! } whatDoYouDo (){ //   return "I write code"; } drinkCoffee (){ //   console.log('*sip*'); } });

当然、上記の「慣習」に従ってこのモジュールもエクスポートします。

 module.exports = { Class: Programmer, Component: React.createClass(Programmer) }

そして今、それはアプリケーションで使用することができます：

 var Programmer = require('programmer').Component;

まあ、または、たとえばJuniorDeveloperでさらに継承/展開します。

それだけです。ReactJSでの（疑似）継承のための松葉杖についての私の短い投稿でした。紳士の皆さん、成功した週を過ごしてください！

（擬似）ReactJSコンポーネントの継承

More articles: