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

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 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>

)

}

}

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

个人网站:http://meckodo.com

以上是 React应该如何优雅的绑定事件? 的全部内容, 来源链接: utcz.com/z/383112.html

回到顶部