Reactで「通常の」ES5プロトタイプ継承を実装する方法は？

Question

私は、ES6クラスが基本的にES5オブジェクトシステムのまわりの構文的砂糖であるという印象を受けています。 私はトランスファーなしでReactを実行しようとしているので、React.Componentから "継承する"オブジェクト "クラス"を定義するために古い構文を使用することができると考えました。

var Board = function(props, state) { 
     var instance = {}; 

     instance.props = props; 
     instance.context = state; 

     return(instance);   
    }; 

    Board.prototype = Object.create(React.Component.prototype); 

    Board.prototype.render = function() { 
     return(
      // ...stuff 
     )    
    }; 

しかし、それは動作しません！

react.js:20478 Warning: Board(...): No `render` method found on the returned component instance: you may have forgotten to define `render` 
react.js:6690 Uncaught TypeError: inst.render is not a function(…) 

私は選択肢in this gist、および以下の作品が見つかりました：

var Board = function(props, state) { 
     var instance = Object.create(React.Component.prototype); 

     instance.props = props; 
     instance.context = state; 

     instance.prototype.render = function() { 
      return(
       // ...stuff 
      )    
     }; 

     return(instance);   
    }; 

私はReact.createClassヘルパーを使用できることも見出しました。

しかし、Reactがこのような一般的な方法で定義されたクラスを処理しない理由を理解したいと思います。 ES6クラスは使用前にインスタンス化されているようです。 ES5スタイルのクラスもインスタンス化されない理由はなく、同様の結果が得られます。

Answer 1

「正常」なES5 prototypal継承がReactでサポートされていないのはなぜですか？

React.createClassはおそらくあなたのより良い選択です。あなたの質問にあるコードは、標準のES5クラスのような継承タスクを実行していないということだけです。特に：

• あなたはプレーンなオブジェクトではなく、Boardのインスタンスのインスタンスを返していて、とてもBoard.prototypeは、オブジェクトによって使用されていません。通常、コンストラクタ関数は何も返さないはずであり、呼び出すときにオブジェクトnewを作成する必要があります。このオブジェクトはthisという名前で受け取ります。
• React.Componentにインスタンスを初期化する機会が与えられていません。
• Board.prototypeにはconstructorが設定されていません（ただし、私はリアクションが関心を持っているかどうかはわかりませんが、多くはそうではありません）。

通常の方法で設定すると機能します。ここでReact.createClassなしES5の例だ、コメントを参照してください。

// The component 
 
function Foo(props) { 
 
    // Note the chained superclass call 
 
    React.Component.call(this, props); 
 
} 
 

 
// Set up the prototype 
 
Foo.prototype = Object.create(React.Component.prototype); 
 
Foo.prototype.constructor = Foo; // Note 
 

 
// Add a render method 
 
Foo.prototype.render = function() { 
 
    return React.createElement("div", null, this.props.text); 
 
}; 
 

 
// Use it 
 
ReactDOM.render(
 
    React.createElement(Foo, { 
 
     text: "Hi there, the date/time is " + new Date() 
 
    }), 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>