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

共计 2384 个字符，预计需要花费 6 分钟才能阅读完成。

前言
由于 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 Practice
class 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 {}

// 这种写法等同于 bind
class Bbb extends Component {
balabala(){}
render() {
const {text} = this.state;
return (
<Wrapper>
{text}
<Balabala onClick={::this.balabala}></Balabala>
</Wrapper>
)
}
}

基本都大同小异吧，就不过多介绍了。看到这里，你也知道到底应该如何绑定事件了。