React生命周期方法能否以类属性形式编写？

先解决你最关心的this上下文问题 #

首先可以放心：类属性形式的箭头函数里的this，和普通类方法里的this（React调用时）指向完全一致，都是组件实例本身。

• 普通类方法（比如render() {}）：React在调用这些生命周期方法时，会自动把this绑定到组件实例上，根本不用担心this丢失的问题。
• 类属性的箭头函数（比如render = () => {}）：箭头函数的this是词法绑定的，会继承定义时的上下文（也就是组件实例的构造函数上下文），所以this也会稳定指向组件实例。

所以在this的一致性上，两种写法没有本质区别，你的这个顾虑其实是多余的~

但类属性写法的生命周期方法确实存在这些弊端 #

虽然this没问题，但这种写法并不推荐用于生命周期方法，主要有以下几个实际问题：

• 额外的内存开销与性能损耗
  类属性的箭头函数是在每个组件实例初始化时创建的，也就是说每渲染一个组件实例，就会生成一个全新的函数副本。而普通的类方法是挂载在组件的原型链上，所有实例共享同一个函数。如果你的组件会被大量渲染（比如列表中的子组件），这种额外的函数实例会累积成可观的内存占用，还可能轻微影响React的diff优化。

• 不利于组件继承与方法重写
  如果你用类继承扩展组件，原型方法可以很方便地通过super调用父类的实现，比如：

  class ChildComponent extends ParentComponent {
    render() {
      return <div>{super.render()}</div>;
    }
  }
  

  但如果父类的render是类属性的箭头函数，子类就无法通过super.render()调用父类的实现了——因为类属性是实例自身的属性，不是原型上的，super访问不到父类实例的这个方法。

• 调试与测试的不便
  调试时，原型方法会清晰地显示在组件的原型链上，你能一眼识别出生命周期方法；而类属性的函数是挂载在每个实例上的，查看实例属性时会显得杂乱。
  在测试中，如果你想用Jest这类框架的spyOn监听生命周期方法，原型方法可以直接spyOn(MyComponent.prototype, 'render')，但类属性的方法只能针对单个实例监听，大大增加了测试复杂度。

• 与React官方推荐风格不一致
  React官方文档里，生命周期方法的示例都是普通类方法的写法。虽然类属性是合法语法（需要Babel支持），但统一使用官方推荐的写法，能让团队协作更顺畅，也更符合社区通用实践。

总结建议 #

如果你喜欢类属性箭头函数无需手动绑定的特性，完全可以用在事件处理方法上（比如handleClick = () => {}），这是非常合适的场景。但对于render、componentDidMount这类生命周期方法，还是推荐使用普通类方法写法——既能避免上述弊端，也能保持组件风格的一致性。

内容的提问来源于stack exchange，提问作者VdeVentura