Question

箭头函数通常用于需要绑定来处理事件的方法。

在文档和示例中的每个地方，生命周期方法（render，componentWillMount，constructor，...）都被定义为常规函数，最终会出现混合方法声明样式组件。

对所有组件方法使用箭头函数是否安全？

我知道它适用于简单的情况，我正在寻找所有潜在的缺点。

Answer 1

是的，如果您想要保持一致性，使用箭头功能是安全的。

componentDidMount(){
  console.log(this)
}

返回：

App {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
context: {}
props: {}
refs: {}
state: null
updater:{isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber:FiberNode {tag: 2, key: null, type: ƒ, stateNode: App, return: FiberNode, …}
_reactInternalInstance:{_processChildContext: ƒ}
isMounted:(...)
replaceState:(...)
__proto__:Component

并且

componentDidMount = () => {
  console.log(this)
}

返回：

App {props: {…}, context: {…}, refs: {…}, updater: {…}, componentDidMount: ƒ, …}
componentDidMount:ƒ ()
context:{}
props:{}
refs:{}
state:null
updater:{isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber:FiberNode {tag: 2, key: null, type: ƒ, stateNode: App, return: FiberNode, …}
_reactInternalInstance:{_processChildContext: ƒ}
isMounted:(...)
replaceState:(...)
__proto__:Component

这两种方法都记录完全相同的类，除了具有componentDidMount = () => {}的类具有componentDidMount作为属性而不是方法，但仍然以相同的方式调用。

所有组件方法的反射箭头函数

1 个答案: