React应该如何优雅的绑定事件？

前言由于JS的灵活性，我们在React中其实有很多种绑定事件的方式，然而，其实有许多我们常见的事件绑定，其实并不是高效的。所以本文想给大家介绍一下React绑定事件的正确姿势。常见两种种错误绑定事件class ErrorExample1 extends Component { balabala(e) {console.log(e)} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={(e) => this.balabala(e)}></Balabala> </Wrapper> ) }}class ErrorExample2 extends Component { balabala(e) {console.log(e)} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.balabala.bind(this)}></Balabala> </Wrapper> ) }}这是两种最常见的React绑定事件代码，但它为什么是错误的？每当你的text发生变化，就会rerender，只要组件重新render，那就会重新创建新的事件函数，进而绑定事件，这个过程的开销就是极大极大的浪费。相当于，每次rerender都会创建一次事件函数。这据说是 Best Practiceclass Balabala extends Component { constructor(p) { suprt(p); this.balabala = this.balabala.bind(this); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.balabala}></Balabala> </Wrapper> ) }}然而我更喜欢的姿势class Balabala extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (e) => { alert(‘想你了’); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我}></Balabala> </Wrapper> ) }}利用箭头函数，帮我们bind this。避免了在构造函数里生命一堆的变量。减少键盘的敲击，延长生命。当然，还有人会问，这样的写法如何传参呢？以前别人会这样写class 渣男 extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (e, text) => { alert(text); // alert 滚吧，渣男 } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我.bind(e, ‘滚吧，渣男’)}></Balabala> </Wrapper> ) }} 但是其实，我们可以这样传参，更加简洁明了class 渣男 extends Component { constructor(p) { suprt(p); } 醒来记得想我 = (text) => (event) => { alert(text); // 你渣我也喜欢，因为是你 } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我( ‘你渣我也喜欢，因为是你’)}></Balabala> </Wrapper> ) }}动态绑定基于这个我们还可以针对同一事件修改多个input值，进行事件优化class ChangeMyName extends Component { 修改渣男名称 = name => { if (!this.handlers[name]) { this.handlers[name] = event => { this.setState({ [name]: event.target.value }); }; } return this.handlers[name]; } render() { return ( <> <input onChange={this.修改渣男名称(‘男神1号’)}/> <input onChange={this.修改渣男名称(‘渣男2号’)}/> </> ) }}旁门左道，邪教！(个人不喜欢而已)import autoBind from ‘react-autobind’;class Balabala extends Component { constructor() { autoBind(this); } 醒来记得想我 (e) { alert(‘想你了’); } render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={this.醒来记得想我}></Balabala> </Wrapper> ) }}import { BindAll } from ’lodash-decorators’;@BindAll()class Bbb extends Component {}// 这种写法等同于 bindclass Bbb extends Component { balabala(){} render() { const { text } = this.state; return ( <Wrapper> {text} <Balabala onClick={::this.balabala}></Balabala> </Wrapper> ) }}基本都大同小异吧，就不过多介绍了。看到这里，你也知道到底应该如何绑定事件了。