React ES6 类组件剖析

Posted 2023-02-23

【中文标题】React ES6 类组件剖析

【英文标题】：Anatomy of React ES6 Class Component

【发布时间】：2019-11-27 15:48:26

【问题描述】：

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

我一直在这里阅读各种答案，并想出了几件事：

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

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

每次渲染都会在渲染方法中创建一个函数，这会对性能造成轻微影响。如果你把它们放在渲染中也会很乱

...更喜欢只在 render 中放置专门处理渲染组件和/或 JSX 的函数（即映射到 prop、根据 prop 有条件地加载适当组件的 switch 语句等...）。如果函数背后的逻辑很繁重，我就不渲染了。

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

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

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

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

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

我的理解是这样的：

class Counter 
   constructor()
     this.count = 0;
   

和这个是一样的：

class Counter 
   count = 0;

来源：https://***.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然后声明它们是否可以使用它们的范围根据需要将它们放入类中，无论是构造函数、渲染方法等吗？如果每个.js 文件只有一个类，这或多或少会好吗？

谢谢！

【参考方案1】：

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

对于原生 JS（换句话说，在浏览器中标准化和支持的 ES 语法）确实如此，但对于 TypeScript，您将使用 class properties（您可以使用 Babel 执行相同操作）：

class Counter 
   count = 0;

这是stage 3 ES proposal syntax。鉴于几乎每个人都在使用 Babel 或 TypeScript 和 React，我很惊讶在构造函数中放置类属性和绑定方法的想法仍然被广泛推荐，这仅在旧代码中是必需的。我个人使用 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 中很少见。