javascript - React Native 扩展多个组件 vs createClass

Question

我看过许多教程，其中的代码建议执行以下操作:

var App = React.createClass({
    someFunction() { .. },
    render() { return(); },
});
var Lication = React.createClass({
    someOtherFunction() { .. },
    render() { return(); },
});

...但我一直在使用 ES6 语法:

class App extends Component {
    someFunction() { .. }
    render { return(); }
}

我在哪里创建 Lication 类？在 App 类的正下方？或者它是否需要自己的文件，并使用类似以下内容导入到主文件中:

var Lication = require('./Lication');

我还没有看到使用多个类的代码。

Answer 1

Where do I create the Lication class? Right below the App class? Or does it need its own file?

使用 ES6 类或 React 的 createClass 函数对您必须在何处定义它们没有任何规定。两者都可以定义在另一个之上或在不同的文件中。使用 ES6 类确实会影响代码顺序的一种方式是使用 hoisting。 :

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it.

这意味着这样的东西是无效的:

var l = new Lication(); // ReferenceError

class Lication {}

---

就是否将代码拆分为文件而言，这是有效的:

class App extends React.Component {
  // ...
}

class Lication extends React.Component {
  // ...
}

这也是:

class App extends React.Component {
  // ...
}

var Lication = require('path-to-lication-class');

Lication 将在其自己的文件中定义并导出:

class Lication extends React.Component {
  // ...
}

module.exports = Lication;

最后一个例子本质上等同于:

class App extends React.Component {
  // ...
}

var Lication = class Lication extends React.Component {
  // ...
}

拆分成文件是为了在代码中实现模块化，其中各个组件被拆分成文件(或模块)以便于维护，并且整个应用程序在开发时不会挤在一个巨大的文件中，而是在以后合并部署时。

这是一个 useful read on classes