媒介

接下来让我们进入新的章节：座谈React。
本篇文章主要讲React事宜体系和表单操纵。

正文

一：事宜体系

1.react的事宜体系
react事宜体系相符W3school规范，不存在任何IE兼容性题目，而且与原生的浏览器事宜一样有一样的API接口。一样支撑事宜的冒泡机制，我们能够运用stopPropagation()和preventDefault()来停止它。
一切的事宜都自动绑定到最外层。假如须要接见原生事宜对象，能够运用nativeEvent属性。

2.合成事宜
（1）事宜委派
react把一切事宜绑定到构造的最外层，运用一个赞同的事宜监听器，这个事宜监听器上保持了一个映射来保留一切组件内部的事宜监听和处置惩罚函数。
（2）自动绑定
在react组件中，每一个要领的上下文都邑指向该组件的实例，即自动绑定this为当前组件。然则在运用ES6 classes或许纯函数时这类自动绑定就不复存在，须要手动完成this的绑定。
（3）绑定要领
3-1：bind要领：能够协助我们绑定事宜处置惩罚完器内的this，而且能够向事宜处置惩罚器中传入参数，比方：

import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
    }
}

3-2构造器内声明（引荐）：在组件的构造器内完成对事宜的绑定。

class App extends Component{
    handleClick(e){
        console.log(e);
        this.handleClick=this.handleClick.bind(this);
    }
    render(){
            return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
        }
}

3-3箭头函数:它自动绑定了定义此函数作用域的this。

class App extends Component{
   const handleClick= (e)=>{
        console.log(e);
    }
    render(){
            return <button onClick={this.handleClick.bind(this,'test')}>Test</button>;
        }
}或
import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return <button onClick={()=>this.handleClick()}>Test</button>;
    }
}

3.原生事宜
componenDidMount会在组件已完成装置而且在浏览器存在实在的 DOM后挪用，此时我们就能够完成对原生事宜的绑定。

import React,{Component} from 'react'
class nativeEventDemo extends Component{
    componentDidMount(){
        this.refs.button.addEventListener('click',e=>{
            handleClick(e);
        })
    }
    handleClick(e){
        console.log(e);
    }
    componentWillUnmount(){
        this.refs.button.removeEventListener('click');
    }
    render(){
        return <button ref = 'button'>Test</button>
    }
}

注重：在react中运用DOM原生事宜时，肯定要在组件卸载时手动移除，不然能够涌现内存走漏题目。

4.夹杂事宜

我们没法在组件中将事宜绑定到组件局限以外的地区，只能运用原生事宜来完成。

然则，只管在React中混用合成事宜和原生DOM事宜：用reactEvent.nativeEvent.stopPropagatoin()来阻挠事宜冒泡是不可的。构造React事宜冒泡的行动只适用于React合成体系中，且没办法阻挠原生事宜冒泡。反之，在原生事宜中阻挠事宜冒泡，却能够阻挠React事宜的流传。

关于没法运用React的合成事宜体系的场景，我们还须要运用原生事宜来完成。

二：表单