扩展React.js组件

Question 1

关于Backbone.js，我最欣赏的事情之一就是简单而优雅的继承是如何工作的。我开始着手处理React，并且在React中无法真正找到类似于此Backbone代码的任何内容

var Vehicle = Backbone.View.extend({
    methodA: function() { // ... }
    methodB: function() { // ... }
    methodC: function() { // ... }
});

var Airplane = Vehicle.extend({
    methodC: function() {
        // Overwrite methodC from super
    }
});

在react中，我们有mixin，如果使用mixin，我们可以像上面的例子那样

var vehicleMethods = {
    methodA: function() { // ... }
    methodB: function() { // ... }
}

var Vehicle = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() { 
        // Define method C for vehicle
    }
});

var Airplane = React.createClass({
    mixins: [vehicleMethods]
    methodC: function() {
        // Define method C again for airplane
    }
});

与一遍又一遍地定义相同的内容相比，这没有那么重复，但是它似乎不像Backbone那样灵活。例如，如果我尝试重新定义/覆盖存在于我的一个混合中的方法，则会收到错误消息。最重要的是，React.js方式为我编写了更多代码。

React中有一些非常聪明的东西，感觉更多的是我没有正确地做到这一点，而不是像React缺少的功能那样。

任何指针，不胜感激。

Question 2

要获得类似于继承的内容（实际上是注释中指出的组成），可以Airplane在示例中将本身包装为Vehicle。如果要Vehicle在Airplane组件中公开方法，则可以使用ref并将它们一对一连接。这并不完全是继承（实际上是composition），尤其是因为this.refs.vehicle在组件安装之后才能访问。

var Vehicle = React.createClass({
    ...
});

var Airplane = React.createClass({
    methodA: function() {
      if (this.refs != null) return this.refs.vehicle.methodA();
    },
    ...
    render: function() {
        return (
            <Vehicle ref="vehicle">
                <h1>J/K I'm an airplane</h1>
            </Vehicle>
        );
    }
});

另外值得一提的是，在React官方文档中，他们更喜欢组合而不是继承：

那么继承呢？在Facebook，我们在成千上万的组件中使用React，但还没有发现建议创建组件继承层次结构的用例。

道具和组合为您提供了以显式且安全的方式自定义组件外观和行为所需的所有灵活性。请记住，组件可以接受任意道具，包括原始值，React元素或函数。

如果要在组件之间重用非UI功能，建议将其提取到单独的JavaScript模块中。组件可以导入它并使用该函数，对象或类，而无需扩展它。

值得一提的另一件事是，使用ES2015 / ES6 +，您还可以将对象道具从Airplane组件传播到Vehicle组件

render: function() {
    return (
        <Vehicle {...this.props}>
            <h1>J/K I'm an airplane</h1>
        </Vehicle>
    );
}

Question 3

如果您使用项目中设置的webpack + babel + react NPM软件包，则在ES6 OOP实施中，它应该像这样简单：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class BaseComponentClass extends Component {
  componentDidMount() {} 
  render() { return (<div>Base Component</div>) }
}
class InheritedComponentClass extends BaseComponentClass {
  // componentDidMount is inherited
  render() { return (<div>Inherited Component</div>) } // render is overridden 
}
ReactDOM.render(<InheritedComponentClass></InheritedComponentClass>, 
     document.getElementById('InheritedComponentClassHolder'));

注意：这是一个简单的入门工具包，具有以下设置：https : //github.com/alicoding/react-webpack-babel

Question 4

通过利用ReactOO，您可以轻松地使用继承（免责声明：我是ReactOO的作者）：

(function () {

    // Class definitions. ReactOO requires class definition first just like you did in an OO way.

    window.Vehicle = window.ReactOO.ReactBase.extend({
        getReactDisplayName: function () {
            return 'Vehicle';
        },

        onReactRender: function (reactInstance) {
            var self = this;

            var text = self.methodC();

            return React.createElement('div', {}, text);
        },

        methodA: function () {
            console.log('Vehicle method A');
        },

        methodB: function () {
            console.log('Vehicle method B');
        },

        methodC: function () {
            return 'Vehicle method C';
        }
    });

    window.Airplane = window.Vehicle.extend({
        getReactDisplayName: function () {
            return 'Airplane';
        },

        methodC: function () {
            // Call this._super() to execute parent method.
            //this._super();
            return 'Airplane method C';
        }
    });

    var vehicle = new window.Vehicle();
    vehicle.render({}, '#vehicle');

    var airPlane = new window.Airplane();
    airPlane.render({}, '#airPlane');
})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ReactOO Vehicle-Aireplane Example</title>
    <link rel="stylesheet" href="css/base.css" />
    <script src="scripts/react.js"></script>
    <script src="scripts/react-dom.js"></script>
    <script src="../src/reactoo.js"></script>
</head>
<body>
    <div id="vehicle">
    </div>
    <div id="airPlane">
    </div>
    <script src="scripts/vehicleAirplane.js">
    </script>
</body>
</html>

展开摘要

Question 5

我认为扩展可以通过使用jQuery.extend或类似方法完成

Base.jsx

module.exports = {
    methodA:function(){
        ...
    }
}

Child.jsx

var Base = require('./Base.jsx');

module.exports = React.createClass($.extend({},Base,{
    methodB:function(){
        ...
        this.methodA();
        ...
    },
    render:function(){
        return ...
    }
}));