React Native扩展多个组件与createClass

bru*_*ruh 4 javascript ecmascript-6 reactjs react-native

我已经看过很多教程,其中的代码建议执行以下操作:

var App = React.createClass({
    someFunction() { .. },
    render() { return(); },
});
var Lication = React.createClass({
    someOtherFunction() { .. },
    render() { return(); },
});
Run Code Online (Sandbox Code Playgroud)

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

class App extends Component {
    someFunction() { .. }
    render { return(); }
}
Run Code Online (Sandbox Code Playgroud)

我在哪里创建Lication课程?App类正下方?或者它是否需要自己的文件,并导入到主文件中,例如:

var Lication = require('./Lication');
Run Code Online (Sandbox Code Playgroud)

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

nem*_*035 5

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

使用ES6类或React的createClass函数没有规定您必须定义它们的位置.两者都可以在另一个上面或在不同的文件中定义.使用ES6类的单向方式确实会影响代码顺序,并且需要提升:

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

这意味着这样的事情是无效的:

var l = new Lication(); // ReferenceError

class Lication {}
Run Code Online (Sandbox Code Playgroud)

至于将代码拆分成文件,这是有效的:

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

class Lication extends React.Component {
  // ...
}
Run Code Online (Sandbox Code Playgroud)

这是这样的:

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

var Lication = require('path-to-lication-class');
Run Code Online (Sandbox Code Playgroud)

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

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

module.exports = Lication;
Run Code Online (Sandbox Code Playgroud)

最后一个例子基本上相当于:

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

var Lication = class Lication extends React.Component {
  // ...
}
Run Code Online (Sandbox Code Playgroud)

分割成文件是为了在代码中实现模块化,其中单个组件被分成文件(或模块),因此它们可以更容易维护,整个应用程序在开发时不会挤在一个巨大的文件中,但在部署后会合并.

这是关于类有用读物