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

在这种特殊情况下，它们是等效的，主要是因为if (ws.get_Range("K14:K" + lastRow).Value != null)应该被实例化一次。

对于多次实例化的组件，情况并非如此。如果用户更改系统时间或新的一年来临，App也将在将来的组件实例中更改。

使用常量作为类字段可提供更大的灵活性。在测试过程中可能需要更改它们，这可以提高可测试性。并且可以根据需要在子类中进行更改。即使您没有将类设计为可扩展的，其他开发人员也可能会从可扩展性中受益：

this.currYear

Answer 2

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

Answer 3

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

Answer 4

首先让我们回答以下问题。通过回答，我们做出正确的选择。如果没有，则currYear变量将由App以外的其他组件使用，否则应在App Component内部实现。为什么会问： 1.用于其他开发人员的代码可读性。 2.很明显，currYear仅由App组件使用，而没有其他任何组件使用零件。 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(...)，则变量值将在每个类中更改，而无需重新渲染视图。

实例变量与模块作用域变量

5 个答案: