是否可以使用箭头函数编写 react 生命周期组件?

是否可以使用箭头函数编写 react 生命周期组件?

内容来自 #10810, 本文只提供翻译而且是基于谷歌翻译的意译. 如有错误欢迎指正.

例如:

class MyComponent extends React.Component{
	render() {}
}

class MyComponent extends React.Component{
     render = () => {}
}

解答

使用箭头函数的一个重要问题是, 箭头函数是属性而非方法, 所以它们不存在于原型中.

这会使浏览器多次渲染同一个组件时每次都运行不同的函数, 而不是运行同一个函数只是 this 指向不同. 从而使得 javascript 引擎的优化变得困难.

即使 react 支持箭头函数的写法, 但是建议将所有函数写为方法的形式, 这样它们会存在于原型中.

如果你的方法需要作为参数或者JSX的元素属性, 建议在构造函数中绑定 this 来创建共享原型的方法.

this.methodName = this.methodName.bind(this);