陣營本地擴展多個組件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

我在哪裏創建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