由於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/