React中的事件绑定

在react中,你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined

1.在构造函数中绑定this或者在调用时绑定this



  
    
    Hello World
    
    
    
  
  
    

 

在调用时绑定this,事件对象以及更多的参数将会被隐式的进行传递



  
    
    Hello World
    
    
    
  
  
    

 

2.属性初始化器语法



  
    
    Hello World
    
    
    
  
  
    

3.在回调函数中使用箭头函数()



  
    
    Hello World
    
    
    
  
  
    

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

你可能感兴趣的:(web前端,前端技术分享)