扩展 React.js 组件

问题描述：

关于 Backbone.js，我最欣赏的一件事是简单而优雅的继承工作方式.我开始掌握 React，但在 React 中找不到任何类似于此 Backbone 代码的内容

One of the things I appreciate the most about Backbone.js is how simple and elegant inheritance works. I'm starting to get to grips with React, and can't really find anything in react that resembles this Backbone code

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

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

在 React 中，我们有 mixins，使用那些我们可以得到一些接近的上面的例子如果我们这样做

In react we have mixins, and using those we could get somewhat close to the above example if we went like this

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 方式那样灵活.例如，如果我尝试重新定义/覆盖存在于我的一个 mixin 中的方法，我会收到错误消息.最重要的是，React.js 方式让我编写更多代码.

This is less repetitive than defining the same stuff over and over again, but it doesn't seem to be nearly as flexible as the Backbone way. For instance, I get an error if I try to redefine/overwrite a method that exists in one of my mixins. On top of that, the React.js way is more code for me to write.

React 中有一些非常聪明的东西，感觉这更像是我不知道如何正确地做到这一点，而不是感觉像是 React 缺少的一个功能.

There is some incredibly clever stuff in react, and it feels like this is more the case of me not getting how to properly do this, than it feels like a feature missing from React.

非常感谢任何指针.

答

要获得类似于继承的东西(实际上是组合，正如评论中指出的那样)，您可以制作一个 Airplane 在您的示例中将自身包装在 Vehicle 中.如果您想在 Airplane 组件中公开 Vehicle 上的方法，您可以使用 ref 并将它们一一连接.这不完全是继承(它实际上是组合)，特别是因为this.refs.vehicle 在组件被挂载后才能访问.

To get something that resembles inheritance (actually composition as pointed out in comments), you can make an Airplane in your example wrap itself in a Vehicle. If you want to expose methods on Vehicle in the Airplane component, you can use a ref and connect them one-by-one. This is not exactly inheritance (it's actually composition), particularly because the this.refs.vehicle will not be accessible until after the component has been mounted.

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 官方文档他们更喜欢组合而不是继承:

Also it's worth mention that in the React official documentation they prefer composition over inheritance:

那么继承呢?在 Facebook，我们在数以千计的应用中使用 React组件，而且我们还没有找到任何我们可以使用的用例建议创建组件继承层次结构.

So What About Inheritance? At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

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

Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

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

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

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

Another thing worth mention that using ES2015/ES6+ you can also spread the object props from Airplane component to the Vehicle component

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

扩展 React.js 组件

相关推荐