如何在React中实现"normal"ES5原型继承？

Question

我的印象是 ES6 类基本上是围绕 ES5 对象系统的语法糖。当我尝试运行在没有转译器的情况下做出反应时，我想我可以使用旧语法来定义对象 "classes" that "inherit" from 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

Why is “normal” ES5 prototypal inheritance not supported in React?

是的，尽管使用 React.createClass 可能是更好的选择。只是您问题中的代码没有执行标准的 ES5 class-like 继承任务。特别是：

您正在 return 生成普通对象的实例，而不是 Board 的实例，因此该对象未使用 Board.prototype。通常，构造函数不应该 return 任何东西，并且应该使用调用它时创建的对象 new，它接收为 this.
您没有给 React.Component 初始化实例的机会。
你没有在 Board.prototype 上设置 constructor（虽然我不知道 React 是否关心；很多事情不关心）。

如果您以正常方式设置它，它会起作用。这是一个没有 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>

如何在React中实现"normal"ES5原型继承？

How to implement "normal" ES5 prototypal inheritance in React?

javascript

reactjs

prototypal-inheritance

es6-class