实例变量与模块范围的变量

Question

以下组件将产生相同的结果：

const currYear = Date.now().getFullYear();
class App extends React.Component {
render() {
return <MyComponent year={currYear} />;
}
};

class App extends React.Component {
constructor() {
super();
this.currYear = Date.now().getFullYear();
}
render() {
return <MyComponent year={this.currYear} />;
}
};

假设变量从未改变。

他们的申请是否等同？
如果没有，是否存在这样的情况：人们应该更喜欢一种方法而不是另一种方法？

好奇了很长时间，但一直没有找到确切的答案。

Answer 1

在这种特殊情况下，它们是等价的，主要是因为App应该实例化一次。

对于一个被实例化多次的组件来说，这是不正确的。如果用户更改系统时间或新年到来，this.currYear在未来的组件实例中也会更改。

使用常量作为类字段提供了更大的灵活性。在测试过程中可能需要更改它们，这可能会提高可测试性。并且可以在需要时在儿童课堂上进行更改。即使您没有将类设计为可扩展的，另一个开发人员也可能从可扩展性中受益：

class BackToTheFutureApp extends App {
currYear = 1955;
}

Answer 2

第一个组件定义了一个全局javascript变量，该变量可能与其他内容(可能存在的第三方组件或脚本(发生冲突。如果另一个组件或脚本也定义了此变量，则会出现运行时错误。如果这是整个应用程序(包括您使用的任何其他组件(中的唯一实例，那么这将是没有问题的。尽管如此，不定义全局变量在某种程度上还是比较干净的。

Answer 3

构造函数内部意味着对于组件的每个实例，您也将拥有该变量的一个实例。我想你最好像第一个例子一样使用它，因为无论你的组件有多少实例，它都只会创建一个变量。同样值得注意的是，如果你采用这种方法，并且你的程序运行了一年以上，那么在某个时候它可能是不正确的。

Answer 4

首先让我们回答以下问题。通过回答，我们做出了正确的选择。currYear变量是否会被应用程序以外的其他组件使用？如果否，则应在应用程序组件内实现。为什么你可能会问：1.为了其他开发人员的代码可读性。2.为了明确currYear仅由应用程序组件使用，而不由任何其他组件使用组成部分3.防止意外变更。

Answer 5

在第一种情况下：

const currYear = Date.now().getFullYear(); // Date is created here
class App extends React.Component {
render() {
return <MyComponent year={currYear} />;
}
};

currYear是其他文件需要该文件或该文件包含在页面上的日期。而在第二个例子中，您在创建类的实例时声明currYear，所以日期会有所不同：

class App extends React.Component {
constructor() {
super();
this.currYear = Date.now().getFullYear();
}
render() {
return <MyComponent year={this.currYear} />;
}
};
<App/> // Date is created here

此外，第一种模式在几乎所有情况下都非常糟糕，例如，如果您执行currYear.setDate(...)，则变量值将在每个类中更改，而不重新渲染视图。