Question

在JavaScript中为React Native创建一个类有什么区别，如下所示：

class Example extends React.Component {


render() {
    return (

        <View style={styles.container}>

        .....

        </View>

    );
}
}


var Example = React.createClass ({


render() {
    return (

        <View style={styles.container}>

        .....

        </View>

    );
}
});

这两种方式都能满足我的需求，但我想知道哪种方式更好，或者想知道差异在哪里....

Answer 1

阅读博客文章（来自Felix的评论）肯定是有帮助的。然而，在来回切换这两个变体之后，我有一些“来自战壕”的想法（第一种情况下是ES6普通javascript类，第二种情况下是React的createClass）。

我在ES6课程添加之后就已经开始了，所以我在教程中使用createClass并使用ES6开始后很快切换到它。我很高兴能够用最好的，更可读的方式...或者我认为。

很快，事实证明使用createClass创建的对象中的一些容易使用普通的javascript并不那么容易或可读。我倾向于使用它编写更多代码并犯更多错误。

首先：你不能将Mixins与ES6类一起使用。这似乎不是一个大问题，但React和React Native中的mixins处理了许多好的案例。我错过的一个是TimerMixin（https://www.npmjs.com/package/react-timer-mixin），它处理处理超时的重要情况，无论你的组件是否仍然在屏幕上呈现。这是解决困难问题的非常好和干净的方法。使用ES6类没有同样好的方法。

第二件事：缺少自动绑定。这可能看起来不是什么大问题，但是期望组件中的“this”实际上意味着“当前对象”是很自然的。也许是因为其他OO语言的背景，但我一直忘记在javascript中它并不那么明显。 React的createClass为您自动绑定，因此当您将对象的方法作为回调传递时，您实际上可以使用“this”。在那些方法里面并引用该对象。在ES6类的情况下，您需要手动.bind（this）这些方法或（甚至更难看）使用箭头函数和pass（）=＆gt; {this.method（）}作为回调，而不仅仅是'this.method'。

最终我发现有更多的情况，createClass方法比ES6的变体更自然，所以我真的推荐这个。在看到createClass方法的可读性之后，我将所有代码都切换回来了。

Zvona在评论中提到了遗产 - 但对我来说并不重要。通常，继承是用户组件的代码味道。在大多数情况下，使用Composition或Mixins更加清晰 - 尤其是React支持在组件之间传输属性。实际上没有让Mixins强迫你进行继承，这为许多边缘情况打开了大门（特别是当涉及在构造函数中执行的代码时，在更复杂的情况下可能会产生一些不良副作用）

React Native的JavaScript中的类声明语法之间的区别

1 个答案: