reactjs - 是否可以在类内部和方法外部声明变量

Question

class Counter extends React.Component {
    var a = 'bla bla';
    render(){ 
    return (
     <h1>{a}</h1>
    )

}
}

1)我在类中描述了一个变量

2)我收到错误，我知道我必须在渲染方法内部声明，但我想知道为什么我们不应该在渲染外部和类内部声明

class Counter extends React.Component {
        var a = 'bla bla';
        render(){ 
        return (
         <h1>{this.a}</h1>
        )

    }
    }

我已经使用了这个，但仍然出现错误

class Counter extends React.Component {

    render(){ 
        var a = 'bla bla';
    return (
     <h1>{a}</h1>
    )

}
}

以下代码解决了我的问题，但我想知道为什么我在上一步中遇到错误

Answer 1

变量是在某个范围内定义的。整个类(class)没有范围。一旦使用了 ES6 类，很好地理解它们的工作原理是很有帮助的。

class Counter {
  constructor() {...}
  render() {...}
}

是语法糖

function Counter() {
  // constructor
}
Counter.prototype.render = function () {...}

没有地方可以在每个类实例化上定义变量，并且可以在构造函数和 render 方法中使用该变量。

这可能是类字段的用例，即 stage 3 proposal :

class Counter extends React.Component {
    a = 'bla bla';

    render(){ 
      return (
       <h1>{this.a}</h1>
      )
    }
}

如果 a 是常量，则不适合。那么它不会从每次重新分配中受益，并且可能是一个常量:

const a = 'bla bla';

class Counter extends React.Component {
    render(){ 
      return (
       <h1>{a}</h1>
      )
    }
}