javascript - React 生命周期方法的类属性

Question

我可以将 React 生命周期方法编写为类属性吗？

我已经使用类属性有一段时间了，因为我喜欢这样一个事实:我不再需要手动绑定(bind)我的方法，但我想在我的组件之间保持一定的一致性，我想知道是否有任何将 React 生命周期方法编写为类属性的缺点

import React, { Component } from 'react';

class MyComponent extends Component {

  render = () => {
    return (
      <div>Foo Bar</div>
    );
  }

}

export default MyComponent;

例如，与等效方法中的上下文相比，此类属性的上下文是否受到影响。鉴于上述代码中的 render 方法被编写为箭头函数，这个问题似乎是相关的。

Answer 1

在某种程度上，真正的答案取决于您的构建管道以及生成的 Javascript 输出的样子。主要有两种可能性:

输入代码

首先我们要说的是，在进行任何类型的管道转换(babel、typescript 等)之前，您正在编写以下内容:

class Test {
    test = () => { console.log('test'); };
}

作为类成员变量输出。

在一个可能的世界中，您的管道还将输出 test 函数作为输出类的成员变量。在这种情况下，输出可能类似于:

function Test() {
    this.test = function() { console.log('test'); };
}

这意味着每当您编写 new Test() 时，test 函数每次都会重新创建。

作为类原型(prototype)函数输出

在另一种主要可能性中，您的管道可能会将其识别为函数属性并将其从类实例转义到原型(prototype)。在这种情况下，输出可能类似于:

function Test() {
}

Test.prototype = {
    test: function() { console.log('test'); }
}

这意味着无论您调用 new Test() 多少次，内存中仍然只会创建一次 test 函数。

期望的行为

希望您清楚地希望最终结果使函数最终出现在原型(prototype)对象上，而不是在每个类实例上重新创建。

但是，虽然您不希望该函数最终作为属性，但这并不一定意味着您不能在自己的代码中以这种方式编写它。只要您的构建链进行正确的转换，您就可以按照您喜欢的任何方式编写它。

尽管如此，查看默认的 babel 设置(你的 babeljs 标签让我相信你正在使用它)，它并没有为你进行这种转换。您可以看到它的实际效果 here 。在左侧，我创建了一个将该函数作为属性的类，以及一个将该函数作为类方法的类。在右侧，babel 显示其输出，您可以看到以函数作为属性的类仍然将其作为实例级属性，这意味着每次调用该类的构造函数时都会重新创建它。

我确实找到了this babel plugin ，看起来它可能会添加这种转换，但我自己没有使用过它，所以我不积极。