×

React事件处理为什么要手动绑定this?

提问者:Terry2023.07.16浏览:1102

react组件会被编译为React.createElement,在createElement中,它的this丢失了,并不是由组件实例调用的,因此需要手动绑定this

为什么不能通过return false阻止事件的默认行为

因为React基于浏览器的事件机制实现了一套自己的事件机制,和原生DOM事件不同,它采用了事件委托的思想,通过dispatch统一分发事件处理函数

React怎么阻止事件冒泡

  • 阻止合成事件的冒泡用e.stopPropagation()

  • 阻止合成事件和最外层document事件冒泡,使用e.nativeEvent.stopImmediatePropogation()

  • 阻止合成事件和除了最外层document事件冒泡,通过判断e.target避免

document.body.addEventListener('click',e=>{
  if(e.target && e.target.matches('div.stop')){
    return
  }
  this.setState({active:false})
})

HOC和hooks的区别

useEffect和useLayoutEffect区别

React性能优化手段

  1. shouldComponentUpdate

  2. memo

  3. getDerviedStateFromProps

  4. 使用Fragment

  5. v-for使用正确的key

  6. 拆分尽可能小的可复用组件,ErrorBoundary

  7. 使用React.lazy和React.Suspense延迟加载不需要立马使用的组件


您的支持是我们创作的动力!

网友回答文明上网理性发言 已有0人参与

发表评论: