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

我在哪里创建Lication类？ App类正下方？或者它需要自己的文件吗？

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

函数声明和类声明之间的一个重要区别是函数声明被提升而类声明不被提升。首先需要声明您的类然后访问它。

这意味着这样的事情无效：

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

React Native扩展多个组件与createClass

1 个答案: