React【 event & this 】

event对象

• 合成事件： React合成事件
• 事件代理： 冒泡 捕获
• event并不是原始的dom对象，而是react自己二次封装的事件对象。
• 可以实现复用

property & state

属性： 父组件传递过来的，自己无法控制，也不能改变

状态： 状态是组件自己内部产生维护的，自己维护，外界无法访问，唯一就是setState来改变

属性和状态的改变都会引起组件的更新

React中this指向问题

一般情况下，类的方法中this是undefined 三种this指向实例的方式：

1. 箭头函数arrow function
2. 匿名函数anonymous function
3. bind绑定
   • render方法中绑定：缺点是每次触发都会返回新的函数，消耗性能
   • constructor方法中绑定：改写原方法，不会重复创建新函数，节约性能

箭头函数

// 箭头函数
调用
<button onClick={ () => this.addTwo() } >add</button>
声明
addTwo(amount = 1) {
    this.setState({ number: this.state.number + amount});
  }

匿名函数

// 匿名函数
调用
<button onClick={ this.add } >add</button>
声明
add = () => this.setState({ number: this.state.number + 1 });

bind绑定

// bind绑定
// render
调用
<button onClick={ this.add.bind(this, 2) } >add</button>
声明
add = (amount) => this.setState({ number: this.state.number + mount });

// constructor
constructor() {
    super();
    this.addTwo = this.addTwo.bind(this, 2);
}
调用
<button onClick={ this.add } >add</button>
声明
add = (amount) => this.setState({ number: this.state.number + mount });