乐趣区

关于前端:react-事件处理

jiezi

react 事件处理

事件绑定

1. 在构造函数中应用 bind 绑定 this

class Button extends React.Component {constructor(props) {super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){console.log('this is:', this);
  }
  render() {
    return (<button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

2. 在调用的时候应用 bind 绑定 this

class Button extends React.Component {handleClick(){console.log('this is:', this);
  }
  render() {
    return (<button onClick={this.handleClick.bind(this)}>
        Click me
      </button>
    );
  }
}

3. 在调用的时候应用箭头函数绑定 this

class Button extends React.Component {handleClick(){console.log('this is:', this);
  }
  render() {
    return (<button onClick={()=>this.handleClick()}>
        Click me
      </button>
    );
  }
}

4. 在定义的时候应用箭头函数绑定 this

class Button extends React.Component {handleClick=()=>{console.log('this is:', this);
  }
  render() {
    return (<button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

事件传参

只有应用办法 2 和办法 3 绑定事件的时候能力传递额定参数

1. 在调用的时候应用 bind 绑定额定参数 

class Button extends React.Component {handleClick(extra, event){console.log('this is:', this, extra, event);
  }
  render() {
    return (<button onClick={this.handleClick.bind(this, 'extra')}>
        Click me
      </button>
    );
  }
}

2. 在调用的时候应用箭头函数绑定额定参数 

class Button extends React.Component {handleClick(extra, event){console.log('this is:', this, extra, event);
  }
  render() {
    return (
      // 这种形式事件对象要显式传递
      <button onClick={(event)=>this.handleClick('extra', event)}>
        Click me
      </button>
    );
  }
}

各种绑定 this 的优缺点比拟

  • 形式 1，只会生成一个办法实例，多个中央应用该办法时不必每个独自绑定，不能传额定参数
  • 形式 2，写法简略，不过每一次调用都会生成一个新的办法实例，对性能有影响，多为属性值传入低阶组件的时候会造成组件的从新渲染，能够额定传参
  • 形式 3，同形式 2
  • 形式 4，写法最不便，定义的时候就间接绑定了 this，然而还属于实验性语法，须要 babel 转译，可额定传参

为什么 react 要开发者本人取绑定 this 呢

这个问题，我刚开始接触 react 的时候也有纳闷不，因为我是先接触的 vue，vue 是会主动帮你把 this 绑定到组件实例上的，为什么 react 不帮咱们做这个事件呢，其实 react 之前是反对过“主动绑定 this”的，然而前面就不再这样做了，把这个权限凋谢给开发者了，为什么做这样的扭转我也不太分明，然而当初看也有益处，这样更加的灵便了，你能够绑定其余不是这个组件的一个办法，选择权交给了开发者，同时也能够激发大家取探索一下略微底层一些的货色

为什么说开发者手动绑定 this 不是 React 特有的行为；这其实与 JavaScript 函数工作原理无关

官网的一段话其实曾经说的十分分明了

你必须审慎看待 JSX 回调函数中的 this，在 JavaScript 中，class 的办法默认不会绑定 this。如果你遗记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理无关

当应用了严格模式，那么没有显式的应用调用者 的状况下，this 永远不会主动绑定到全局对象上，如果你应用了 ES6 的 class 语法，所有在 class 中申明的办法都会主动地应用严格模式，所以 class 的办法默认不会绑定 this

举例 

// 应用 ES6 的 class 语法，模仿 react 的 render 中事件的绑定
class Cat {sayThis () {console.log(this); // undefined
  }

 exec (cb) {cb(); // 没有显示的调用，在 class 内不会默认绑定 this，cb() 函数内的 this 没有指向任何对象}

 render () {this.exec(this.sayThis); // 用点操作符只是把这个办法的援用值传递到了 exec 办法外部，sayThis 这个办法内的 this 只有在真正调用执行的时候才会确定
  }
}

const tom = new Cat();
tom.render();
退出移动版