React ES6类组件的剖析

Question

我试图遵循React中的一些最佳实践，并且想知道使用ES6类时React组件的结构以及在哪里声明事物，特别是类或.js文件将要使用的变量或属性。

我在这里阅读了各种答案，并且发现了以下几点：

1. 无法在ES6中直接在类上初始化属性，当前只能以这种方式声明方法。 同样的规则也适用于ES7。

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

2. 每次渲染时都会在render方法中创建一个函数，这对性能影响不大。 如果将它们放在渲染中也很混乱

   ...只建议将渲染函数放到专门处理渲染组件和/或JSX的函数中（例如，在prop上进行映射，根据prop来有条件地加载适当组件的switch语句等）。 如果该函数背后的逻辑比较繁琐，则将其保留在渲染之外。

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

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

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

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

这是否意味着该类的所有不是方法且不属于render变量都属于类构造函数？

我的理解是：

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

与此相同：

class Counter {
   count = 0;
}

资料来源： https : //stackoverflow.com/a/47960459/4942980

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

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文件中填充了变量和有时，调用方法的类是方法，然后是方法。

来自更面向对象的背景，在我看来这是错误的吗？ 他们正确吗？ 所有属性应该放在构造函数中还是在类上（如果它们不显式处理渲染）还是在render方法中（如果可以）？ 还是使用诸如let这样的变量关键字进行声明然后将它们放入类中，是构造函数，render方法等（根据需要使用它们的作用域）是否合适？ 如果每个.js文件只有一个类，这是否差不多？

谢谢！

Answer 1

这是否意味着该类的所有不是方法且不属于render的变量都属于类构造函数？

对于本机JS（换句话说，浏览器已标准化并支持的ES语法）而言，这是正确的，但是对于TypeScript，您将使用类属性 （并且您可以使用Babel进行相同的操作）：

class Counter {
   count = 0;
}

这是第3阶段ES建议语法 。 考虑到几乎每个人都在React中使用Babel或TypeScript的事实，我很惊讶仍然广泛建议将类属性和绑定方法放在构造函数中的想法，这仅在旧代码中是必需的。 我个人使用TypeScript，几乎从来没有这样做。

在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声明变量，并在类外部声明属性（在这种情况下为变量），然后根据需要将其粘贴在类中

是的，那看起来不对。

那是在模块范围（ 不是类实例范围）中定义一个属性。 不建议从render()引用组件外部的内容。 您应该尝试使组件保持纯净（仅基于this.props和this.state渲染）。

在类外使用let或const与在类上声明静态内容大致相同：

class Counter {
  static count = 0;
}

每个Counter都可以访问相同的共享Counter.count变量。 可能有一个用例，但以我的经验在React中很少见。