react03

JSX中的事件绑定：

render(){
   return <button className='btn btn-success'
              onClick={this.support}>
          支持</button>;
}

support(ev){
   //=>THIS:undefined（不是我们理解的当前操作的元素）
   //=>ev.target：通过事件源可以获取当前操作的元素（一般很少操作，因为框架主要是数据驱动所有DOM的改变）
}

如果能让方法中的THIS变成当前类的实例就好了，这样可以操作属性和状态等信息

render(){
   //=>THIS:实例
   return <button className='btn btn-success'
              onClick={this.support.bind(this)}>
          支持</button>;
}

support(ev){
   //=>THIS:实例
}

render(){
   //=>THIS:实例
   return <button className='btn btn-success'
              onClick={this.support}>
          支持</button>;
}

support=ev=>{
  //=>THIS:继承上下文中的THIS（实例）, 真实项目中，给JSX元素绑定的事件方法一般都是箭头函数，目的是为了保证函数中的THIS还是实例
}

REACT组件

基于数据驱动（修改状态数据，REACT帮助我们重新渲染视图）完成的组件叫做“受控组件（受数据控制的组件）”
基于REF操作DOM实现视图更新的，叫做“非受控组件”
=>真实项目中，建议大家多使用“受控组件”

VUE：[MVVM] 数据更改视图跟着更改，视图更改数据也跟着更改（双向数据绑定）
REACT：[MVC] 数据更改视图跟着更改（原本是单向数据绑定，但是我们可以自己构建出双向的效果）

react的DOM

/* ref='spanLeft'
  *   是在当前实例上挂载一个属性refs（对象），存储所有的ref元素
  *
  * x => this.spanLeft = x
  *   x代表当前元素，它的意思是，把当前元素直接挂载到实例上，后期需要用到元素，直接this.spanLeft获取即可 */

生命周期函数（钩子函数）：

描述一个组件或者程序从创建到销毁的过程，我们可以在过程中间基于钩子函数完成一些自己的操作（例如：在第一次渲染完成做什么，或者在二次即将重新渲染之前做什么等…）

基本流程

constructor 创建一个组件
componentWillMount 第一次渲染之前
render 第一次渲染
componentDidMount 第一次渲染之后

修改流程

当组件的状态数据发生改变(SET-STATE)或者传递给组件的属性发生改变(重新调用组件传递不同的属性)都会引发RENDER重新执行渲染(渲染也是差异渲染)]
shouldComponentUpdate 是否允许组件重新渲染(允许则执行后面函数，不允许直接结束即可)
componentWillUpdate 重现渲染之前
render 第二次及以后重新渲染
componentDidUpdate 重现渲染之后
componentWillReceiveProps：父组件把传递给子组件的属性发生改变后触发的钩子函数

卸载

原有渲染的内容是不消失的，只不过以后不能基于数据改变视图了
componentWillUnmount：卸载组件之前（一般不用）