在react中,处理事件响应的方式主要有: (1). 使用匿名函数; (2).使用组件的方法; (3). 使用属性初始化的语法;
(1).使用匿名函数,
这是最简单的一种方式,哪里需要响应事件就在哪里创建一个匿名函数,
先看代码:
handleChange(e){
console.log("e",e);
}
render(){
return <div>
<Button onClick = {(e) => handleChange(e)}></Button>
</div>
}
点击Button的事件响应函数是一个匿名函数，这应该是最常见的处理事件响应的方式了。这种方式的好处是，简单直接。哪里需要处理事件响应，就在哪里定义一个匿名函数处理。
在上面的代码中,也可以不使用箭头函数,直接使用onClick = {function(){}}的形式, 但实际开发中不会用到这种方式,因为箭头函数解决了this绑定的问题，可以将函数体内的this绑定到当前对象，而不是运行时调用函数的对象。如果响应函数中需要使用this.state，那么这种方式就无法正常运行了。所以项目中一般直接使用箭头函数定义的匿名函数作为事件响应。
使用匿名函数的缺点是：当事件响应逻辑比较复杂时，匿名函数的代码量会很大，会导致render函数变得臃肿，不容易直观地看出组件最终渲染出的元素结构。另外，每次render方法调用时，都会重新创建一个匿名函数对象，带来额外的性能开销，当组件的层级越低时，这种开销就越大，因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然，在大多数情况下，这点性能损失是可以不必在意的。
(2).使用组件方法:
毫无疑问,按钮的响应事件是直接调用组件的方法,这种方式需要通过在 constructor中手动绑定this;
看代码:
constructor(props, context) {
super(props, context);
this.state = {
options: {},
}
this.handleChange = this.handleChange.bind(this);
}
handleChange (e){
console.log("e",e);
}
render(){
return <div>
<button onClick={this.handleChange }>功能介绍听您的</button>
</div>
}
点击Button的事件响应函数是组件的方法：handleClick。这种方式的好处是：每次render方法的调用，不会重新创建一个新的事件响应函数，没有额外的性能损失。但是，使用这种方式要在构造函数中为作为事件响应的方法(handleClick)，手动绑定this: this.handleClick = this.handleClick.bind(this)，这是因为ES6 语法的缘故，ES6 Class 的方法默认不会把this绑定到当前的实例对象上，需要我们手动绑定。每次都手动绑定this是不是有点繁琐？好吧，让我们来看下一种方式。
(3). 使用属性初始化语法
//代码4
class MyComponent extends React.Component{
state = {number: 0};
handleClick = () => {
this.setState({
number: ++this.state.number
});
}
render() {
return (
<button onClick={this.handleClick}>功能介绍听您的</button>
);
}
}
说明: 这里是利用的es7的属性初始化语法, 从constructor里拿出来放到property initializer（属性初始化器）里。我们可以看到这里没有使用constructor函数, 直接将state写在了外面. constructor是ES6中类的构造函数。整个构造函数需要一个参数props，其全部的值都在上文的代码中给出：title、image等。state = ...一句中，使用props初始化了整个组件的state初值。
扩展：事件响应函数的传参问题
事件响应函数默认是会被传入一个事件对象Event作为参数的。如果想传入其他参数给响应函数应该怎么办呢？使用第一种方式的话很简单，直接使用新参数：
//代码5
class MyComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1 };
}
handleClick(item,event) {
this.setState({
current: item
});
}
render() {
return (
{this.state.list.map(
(item)=>(
onClick={(event) => this.handleClick(item, event)}>{item}
)
)}
);
}
}
onClick的响应函数中，方法体内可以直接使用新的参数item。
使用第二种方式的话，可以把绑定this的操作延迟到render中，在绑定this的同时，绑定额外的参数：
//代码6
class MyComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1 };
}
handleClick(item) {
this.setState({
current: item
});
}
render() {
return (
{this.state.list.map(
(item)=>(
onClick={this.handleClick.bind(this, item)}>{item}
)
)}
);
}
}
使用第三种方式，解决方案和第二种基本一致：
//代码7
class MyComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1 };
}
handleClick = (item) => {
this.setState({
current: item
});
}
render() {
return (
{this.state.list.map(
(item)=>(
onClick={this.handleClick.bind(undefined, item)}>{item}
)
)}
);
}
}
不过这种方式就有点鸡肋了，因为虽然你不需要通过bind函数绑定this，但仍然要使用bind函数来绑定其他参数。
关于事件响应函数，还有一个地方需要注意。不管你在响应函数中有没有显式的声明事件参数Event，React都会把事件Event作为参数传递给响应函数，且参数Event的位置总是在其他自定义参数的后面。例如，在代码6和代码7中，handleClick的参数中虽然没有声明Event参数，但你依然可以通过arguments[1]获取到事件Event对象。
总结一下，三种事件处理的方式，第一种有额外的性能损失；第二种需要手动绑定this，代码量增多；第三种用到了ES7的特性，目前并非默认支持，需要Babel插件的支持，但是写法最为简洁，也不需要手动绑定this。一般推荐使用第二种和第三种方式。
参考文档: 1. https://www.jianshu.com/p/429b2326bf9b
2.https://www.cnblogs.com/ikcamp/p/8989492.html
3. 官方文档:http://www.css88.com/react/docs/handling-events.html
4. https://segmentfault.com/q/1010000007247736/a-1020000007247989
网友评论