反应生命周期方法的类属性

Question

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

我一直在使用类属性,因为我喜欢我不再需要手动绑定我的方法,但我想在我的组件之间保持一定的一致性,我想知道写作是否有任何缺点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函数将每一次重新创建.

输出为类原型函数

在另一个主要的可能性中,您的管道可以将其识别为函数属性,并将其从类实例转义为原型.在这种情况下,输出可能类似于:

function Test() {
}

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

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

期望的行为

希望很明显,您希望最终结果使函数最终在原型对象上,而不是在每个类实例上重新创建.

但是,虽然您希望函数不会以属性结束,但这并不一定意味着您无法在自己的代码中以这种方式编写它.只要您的构建链正在进行正确的转换,您就可以按照自己喜欢的方式编写它.

虽然,查看默认的babel设置(你的babeljs标签让我相信你正在使用它),但它并没有为你做这个转换.你可以在这里看到这个.在左边,我创建了一个类,其中函数作为属性,一个类将函数作为类方法.在右侧,babel显示它的输出,您可以看到具有该属性的类仍然具有实例级属性,这意味着每次调用该类的构造函数时都会重新创建它.

我确实找到了这个babel插件,看起来它可能会添加这个转换,但我没有用它自己,所以我不是积极的.