react数据绑定和事件绑定

react中属性的命名方式都是小驼峰(如：className、onClick)

1. 数据绑定

　　react中的数据绑定是使用大括号{}

<div className="content">{aa}</div> // 函数式组件
<div className="content">{this.state.aa}</div> // 类组件

　　react没有双向绑定，函数式组件得使用hooks，类组件使用状态管理实现双向绑定效果

　　hooks只能在函数式组件中使用，在类组件中没有效果，hooks就是为了能在函数式组件中使用类组件中的周期函数以及state

2. 事件绑定

　　函数式组件

onClick={aa}
// 或
onClick={()=>{aa()}}

　　类组件

onClick={this.aa}
// 或
onClick={()=>{this.aa()}}

 ps：类组件的周期函数中可以直接使用this，this指向当前实例化对象，但是在其他事件函数中使用this的话，要使用.bind(this)或者使用箭头函数，要不然this是undefined，因为绑定onClick相当于将使用中间变量传递实例对象，this指向会丢失。

aa(){
  console.log(this); // undefined  
}
bb(){
  console.log(this); // 当前实例对象  
}
cc(){
  console.log(this); // 当前实例对象   
}
...
onClick={this.aa}
onClick={this.bb.bind(this)}
onClick={()=>{this.cc()}}

3. 事件传递参数

　　函数式组件

const aa = (e,params)=>{
    console.log(e,params);
}
...
onClick={aa}  // 默认隐式传递事件对象e

onClick={(e)=>{aa(e,params)}} // 传递事件对象e和参数

　　类组件

aa = (e,params)=>{
    console.log(e,params);
}
...
onClick={this.aa} // 默认隐式传递事件对象e

onClick={this.aa.bind(this,params)} // 传递事件对象e和参数
// 或
onClick={(e)=>{this.aa(e,params)}}

 ps：使用箭头函数时事件对象e要显式传递！