Javascript 如何实施"；“正常”；React中的ES5原型遗传？

我的印象是ES6类基本上是ES5对象系统中的一种语法糖。 当我试图在没有transpiler的情况下运行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(…)

我找到了替代方案，并进行了以下工作：

    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

helper

但我仍然想理解React为什么不处理以这种常见方式定义的类。在我看来，ES6类在使用之前是实例化的。我看不出为什么ES5风格的类也会被实例化，并得到类似的结果

为什么React中不支持“正常”ES5原型继承

是的，尽管使用

React.createClass

可能是更好的选择。只是您问题中的代码没有执行标准的ES5类继承任务。特别是：

• 您返回的是普通对象的实例，而不是

  Board

  的实例，因此

  Board.prototype

  不被对象使用。通常，构造函数不应该返回任何内容，应该使用在调用它时创建的对象

  new

  ，它作为

  this

  接收该对象
• 您没有给

  React.Component

  初始化实例的机会
• 你没有在

  板上设置
  构造器
  。prototype
  （虽然我不知道React是否在乎，但很多事情都不在乎）

如果你以正常的方式设置它，它就会工作。下面是一个不带React.createClass的ES5示例，请参见注释：

//组件
功能Foo（道具）{
//注意链式超类调用
React.Component.call（这是道具）；
}
//建立原型
Foo.prototype=Object.create（React.Component.prototype）；
Foo.prototype.constructor=Foo；//注
//添加渲染方法
Foo.prototype.render=函数（）{
返回React.createElement（“div”，null，this.props.text）；
};
//使用它
ReactDOM.render(
React.createElement（Foo{
文本：“您好，日期/时间是”+新日期（）
}),
document.getElementById（“react”）
);

不要在构造函数中创建并返回
实例
变量；改用
此
，不要返回任何内容。（你在第一个片段中所做的并不是真正正确地完成ES5课程。）我希望人们不要否决这个问题。被接受的答案提供了一些信息和一个清晰的例子，这是我在网上很难找到的。对于任何试图使用React处理“旧式”对象的人来说，这可能是一个有用的问题，尽管我犯了一些错误。您可以看看下面的答案：您是对的，我没有正确地实现第一个示例。然而，这是从早期的尝试演变而来的，早期的尝试也不起作用，而它们本应该起作用。您的答案似乎包含一些有价值的（缺少的）信息，例如对构造函数中父类的调用。我还想知道
Foo.prototype=Object.create（React.Component.prototype）不应该是
Foo=Object.create（React.Component.prototype）
@Rolf:Re上面评论中关于
Foo
的问题：不，不应该。那么
Foo
将是一个非函数对象，它将不起作用。