React ES6类组件剖析

Question

>

在ES6中直接初始化类上的属性是不可能的，目前只能用这种方式声明方法。同样的规则也存在于ES7中。

https://stackoverflow.com/a/38269333/4942980

render方法中的一个函数将在每个呈现中创建，这对性能有一点影响。如果你把它们放在渲染图中也很乱

...更喜欢只将专门处理呈现组件和/或JSX的函数放在render中（即，在prop上进行映射，根据prop有条件地加载适当组件的switch语句，等等）。如果函数背后的逻辑很重，我会把它排除在渲染之外。

https://stackoverflow.com/a/42645492/4942980

而且，构造函数应该只创建和初始化一个新实例。它应该设置数据结构和所有特定于实例的属性，但不执行任何任务。

https://stackoverflow.com/a/24686979/4942980

class Counter {
   constructor(){
     this.count = 0;
   }
}

与此相同：

class Counter {
   count = 0;
}

我见过我的朋友这样写代码：

let count = 0;

class Counter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <span>{count}</span>
    )
  }
}

ReactDOM.render(<Counter />, document.getElementById("root"));

也就是说，它们习惯于用let/const/var声明变量，并在类之外声明属性（在本例中是变量），然后根据需要将其粘贴在类中，因此.js文件中填充变量，有时还有方法，然后在中间是调用它们的类。

从更面向对象的背景来看，这在我看来是错误的？他们正确吗？所有的属性应该放在构造函数中还是在类中（如果它们不处理显式呈现），或者如果它们处理，应该放在呈现方法中？或者，是否可以使用let这样的变量关键字进行声明，然后根据需要使用它们的作用域将它们放在类中，无论是构造函数还是呈现方法等？如果每个.js文件只有一个类，那么这是否可以呢？

Answer 1

这是否意味着类的所有变量，不是方法，不属于呈现，都属于类构造函数？

对于本机JS（换句话说，在浏览器中标准化和支持的ES语法）来说是如此，但是对于TypeScript来说，您将使用类属性（使用Babel也可以这样做）：

class Counter {
   count = 0;
}

这是第3阶段ES建议语法。事实上，几乎每个人都在使用Babel或TypeScript与React一起使用，我很惊讶将类属性和绑定方法放在构造函数中的想法仍然被如此广泛地推荐，这只在旧代码中是必要的。就我个人而言，我使用打字稿，几乎从不这样做。

声明类属性在TypeScript中特别有用，因为这是定义类类型本身的方式（即count是counter的属性）。否则，您需要处理类型错误：

class Counter {
  constructor() {
    this.count = 3; // Error: Property 'count' does not exist on type 'Counter'.
  }
}

我见过我的朋友这样写代码：

let count = 0;

class Counter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <span>{count}</span>
    )
  }
}

也就是说，他们习惯于用let/const/var声明变量，并在类之外声明属性（在本例中是变量），然后根据需要将其粘贴在类中

是啊，看起来不对。

class Counter {
  static count = 0;
}