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

// 這種寫法等同於 bindclass Bbb extends Component {
    balabala(){}
    render() {        const { text } = this.state;        return (          <Wrapper>
            {text}            <Balabala onClick={::this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

基本都大同小異吧，就不過多介紹了。看到這裏，你也知道到底應該如何綁定事件了。

鄭州專業不孕不育醫院:http://jbk.39.net/yiyuanzaixian/zztjyy/

　　鄭州不孕不育醫院×××:http://jbk.39.net/yiyuanzaixian/zztjyy/