人人周末好，2016年的末了几篇文章最先写到了React的一些东西，那末近来就来一些图表君关于React的简朴总结和明白，那末本日就最先第一篇，说一说React的事宜体系。
总览
简朴来讲React完成了一个SyntheticEvent层，一切定义的事宜处置惩罚器都能够接受到一个SyntheticEvent对象的实例，他是一个跨浏览器的关于原生事宜的包装，和原生事宜一样有一样的接口，包含stopPropagation()和preventDefault()。
合成事宜的运用体式格局
在React中不会把一切的事宜处置惩罚器绑定到响应的实在的DOM节点上，而是运用一个一致的事宜监听器，把一切的事宜绑定在最外层。当事宜发作的时刻，起首被这个一致的事宜监听器处置惩罚，随后找到真正的事宜处置惩罚函数举行挪用，如许是为了进步效力，这是由于在UI体系中，事宜处置惩罚器越多，那末占有的内存就越大，React的做法是将其简化为一个，如许就大大进步了效力。在之前开发者须要为了优化机能须要本身来优化本身的事宜处置惩罚器的代码，如今React协助你完成了这些事情。
合成事宜的绑定体式格局
说了这么很多理论上的学问，我们来看看合成事宜是怎样运用的。
bind要领。
我们来直接看代码
import React, {Component} from 'react';
class EventApp extends Component {
handleClick(e,args){
console.log('this is the react event',e)
console.log('this is the args', args)
}
render(){
return <button onClick={this.handleClick.bind(this,'test')}>Test</button>
}
}
组织器内声明
再来看代码
import React, {Component} from 'react';
class EventApp extends Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
console.log('this is the react event',e)
}
render(){
return <button onClick={this.handleClick}>Test</button>
}
}
运用组织器内声明的要领，仅仅要绑定一次而不须要每次运用的时刻都绑定一次。
箭头函数
class ButtonApp extends React.Component {
handleClick (e) {
console.log(e.target.value)
}
render(){
return <button onClick={(e) => this.handleClick(e)}>Test</button>;
}
}
从上边的运用体式格局我们能够看出React来运用合成事假照样很简朴的，然则实际的天下老是越发的庞杂的。那末在React中我们能够运用原始事宜吗？当然是能够的。
运用原生事宜
在React中我们也能够运用原生事宜，那末怎样举行绑定呢，由于React供应了ComponentDidMount如许的API让我们能够挪用，那末要运用原生事宜我们就能够在DidMount后举行绑定。比方上边的谁人例子中假如我们想把click事宜绑定在原生button上该怎样做呢？我们来看代码：
class ButtonApp extends React.Component {
componentDidMount(){
this.refs.button.addEventListener('click' e => {
console.log(e);
})
}
componentWillUnmount(){
this.refs.button.removeEventListener('click')
}
render(){
return <button ref="button">Test</button>
}
}
在这里例子中我们运用原生事宜的要领绑到了button上，注重一点的是在DidMount上add了这个listener在willUnmont上remove这个listener。一定要手动的记着移除，不然可能会涌现内存走漏题目。假如我们运用React合成事宜，这些事React已帮你做好了。然则实际的情况下我们有一些场景是不能不用到原生的事宜的那末该怎样做呢？
我们来看下边的一个例子。比方我们要完成如许的一个功用，在页面上有个button，当点击它会涌现一个图片。当点击页面的其他部份的时刻，这个图片会自动的消逝，那末如许的需求我们就不能不运用原生的事宜了。话不多说我们来看代码完成。
import React from 'react';
class App extends React.Component {
constructor(props){
super(props);
this.state = {
show: false
}
this.handleClick = this.handleClick.bind(this)
this.handleClickImage = this.handleClickImage.bind(this);
}
handleClick(){
this.setState({
show: true
})
}
componentDidMount(){
document.body.addEventListener('click', e=> {
this.setState({
show: false
})
})
}
componentWillUnmount(){
document.body.removeEventListener('click');
}
render(){
return (
<div className="container">
<button onClick={this.handleClick}>Open Image</button>
<div className="img-container" style={{ display: this.state.show ? 'block': 'none'}} >
<img src="http://blog.addthiscdn.com/wp-content/uploads/2014/11/addthis-react-flux-javascript-scaling.png" />
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
上边一个例子中，我们完成了组件APP，他里边有一个button，它上边有一个handleClick的事宜处置惩罚器，当触发时会把app的state里show制成true，如许图片就显现了出来。同时在body上运用了原生事宜，当发作点击事宜的时刻，就会被收起，如许就简朴完成了需求的功用，那是看似如许彷佛就没有题目的，然则这其中有个bug，究竟是什么题目呢，我们下篇文章继承。看看原生事宜和合成事宜混用的那些事。
参考文献：
深切react手艺栈
