Question

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

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

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

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

将在每个渲染器中创建render方法中的一个函数，这对性能影响不大。如果将它们放入渲染中也很麻烦

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

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

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

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

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，您将使用class properties（并且您可以使用Babel进行相同操作）：

class Counter {
   count = 0;
}

这是stage 3 ES proposal syntax。考虑到几乎每个人都在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中很少见。

React ES6类组件的剖析

1 个答案: