javascript - 为什么不在类外部/顶部声明变量以避免使用此关键字？

Question

为什么我应该在类中声明 var、let 和 const，并要求整个类使用关键字 this 来引用这些变量，而不是仅仅在文件顶部的类，以避免需要使用 this。我明白了我将多次重复使用的类的实例变量的要点，但如果它只是我网站的一个页面，是否需要在类中声明变量。谢谢。

Answer 1

这是一个共享内存(闭包和上下文)的问题。
当您使用实例存储数据(并通过 this 引用它)时，您无法在安装过程中保留数据(当组件重新安装时)。
当您使用“外部”变量时，数据将持续存在。

这是一个小例子，只需单击按钮几次，看看外部变量的数量如何增加，而实例变量在每次安装时重置:

let externalCounter = 0;

class Test extends React.Component {
  componentDidMount() {
    externalCounter += 1;
    this.myCounter += 1;
  }
  
  myCounter = 0;
  
  render() {
    return <div>{`external counter is ${externalCounter} and myCounter is ${
      this.myCounter
    }`}</div>;
  }
}


class App extends React.Component {
  state = { mount: true };
  toggleMount = () => this.setState(({ mount }) => ({ mount: !mount }));
  render() {
    const { mount } = this.state;
    return (
      <div>
        <button onClick={this.toggleMount}>toggle mount</button>
        {mount && <Test />}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

当然，我的印象是您正在使用某种模块导出，并且“外部”变量是在模块范围内声明的。

编辑
作为以下评论和问题的后续:

so two classes in separate files. One parent, one child. The child's module level variable will not persist across mounting and mounting.

这并不完全正确。
给定这个模块:

let externalCounter = 0;

class Test extends React.Component {
  componentDidMount() {
    externalCounter += 1;
    this.myCounter += 1;
  }

  myCounter = 0;

  render() {
    return <div>{`external counter is ${externalCounter} and myCounter is ${
      this.myCounter
      }`}</div>;
  }
}

export defualt Test;

将其视为具有嵌套函数的大函数:

function SomeModule(){
  let externalCounter = 0;
  function Test(props){
    // some logic
  }

  return Test;
}

当您在另一个模块(文件)中导入 Test 时，您实际上获取了内部函数 Test ，并且每当 React 重新挂载此组件时，它都会被重新调用，但这并不意味着 SomeModule 函数将被重新调用，它不会。因此，externalCounter 将在调用 Test 函数时保留数据。
这实际上是一个closure .