成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

React應(yīng)該如何優(yōu)雅的綁定事件？

wpw / 3467人閱讀

摘要：前言由于的靈活性，我們?cè)谥衅鋵?shí)有很多種綁定事件的方式，然而，其實(shí)有許多我們常見(jiàn)的事件綁定，其實(shí)并不是高效的。所以本文想給大家介紹一下綁定事件的正確姿勢(shì)。相當(dāng)于，每次都會(huì)創(chuàng)建一次事件函數(shù)?？吹竭@里，你也知道到底應(yīng)該如何綁定事件了。

前言 
由于JS的靈活性，我們?cè)赗eact中其實(shí)有很多種綁定事件的方式，然而，其實(shí)有許多我們常見(jiàn)的事件綁定，其實(shí)并不是高效的。所以本文想給大家介紹一下React綁定事件的正確姿勢(shì)。
常見(jiàn)兩種種錯(cuò)誤綁定事件 
class ErrorExample1 extends Component {

    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        
        return (
          
            {text}
             this.balabala(e)}>
          
        )
    }
}

class ErrorExample2 extends Component {
    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}

這是兩種最常見(jiàn)的React綁定事件代碼，但它為什么是錯(cuò)誤的？

每當(dāng)你的text發(fā)生變化，就會(huì)rerender，只要組件重新render，那就會(huì)重新創(chuàng)建新的事件函數(shù)，進(jìn)而綁定事件，這個(gè)過(guò)程的開(kāi)銷(xiāo)就是極大極大的浪費(fèi)。相當(dāng)于，每次rerender都會(huì)創(chuàng)建一次事件函數(shù)。

這據(jù)說(shuō)是 Best Practice 
class Balabala extends Component {
    constructor(p) {
        suprt(p);
        this.balabala = this.balabala.bind(this);
    }
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}
然而我更喜歡的姿勢(shì) 
class Balabala extends Component {
    constructor(p) {
        suprt(p);
    }
    醒來(lái)記得想我 = (e) => {
        alert("想你了");
    }
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}

利用箭頭函數(shù)，幫我們bind this。避免了在構(gòu)造函數(shù)里生命一堆的變量。減少鍵盤(pán)的敲擊，延長(zhǎng)生命。

當(dāng)然，還有人會(huì)問(wèn)，這樣的寫(xiě)法如何傳參呢？以前別人會(huì)這樣寫(xiě)

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒來(lái)記得想我 = (e, text) => {
        alert(text); // alert 滾吧，渣男
    }
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}

但是其實(shí)，我們可以這樣傳參，更加簡(jiǎn)潔明了

class 渣男 extends Component {
    constructor(p) {
        suprt(p);
    }
    醒來(lái)記得想我 = (text) => (event) => {
        alert(text); // 你渣我也喜歡，因?yàn)槭悄?    }
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}
動(dòng)態(tài)綁定

基于這個(gè)我們還可以針對(duì)同一事件修改多個(gè)input值，進(jìn)行事件優(yōu)化

class ChangeMyName extends Component {
  修改渣男名稱(chēng) = name => {
    if (!this.handlers[name]) {
      this.handlers[name] = event => {
        this.setState({ [name]: event.target.value });
      };
    }
    return this.handlers[name];  
  }
  
  render() {
    return (
        <>
          
          
        
    )
  }
}
旁門(mén)左道，邪教！(個(gè)人不喜歡而已) 
import autoBind from "react-autobind";

class Balabala extends Component {
    constructor() {
       autoBind(this);
    }
    醒來(lái)記得想我 (e) {
        alert("想你了");
    }
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}
import { BindAll } from "lodash-decorators";

@BindAll()
class Bbb extends Component {}

// 這種寫(xiě)法等同于 bind
class Bbb extends Component {
    balabala(){}
    render() {
        const { text } = this.state;
        return (
          
            {text}
            
          
        )
    }
}

基本都大同小異吧，就不過(guò)多介紹了。看到這里，你也知道到底應(yīng)該如何綁定事件了。

個(gè)人網(wǎng)站：http://meckodo.com

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100615.html

相關(guān)文章

  • 如何優(yōu)雅地在React中處理事件響應(yīng)

    摘要：處理事件響應(yīng)是應(yīng)用中非常重要的一部分。中，處理事件響應(yīng)的方式有多種。關(guān)于事件響應(yīng)的回調(diào)函數(shù)，還有一個(gè)地方需要注意。不管你在回調(diào)函數(shù)中有沒(méi)有顯式的聲明事件參數(shù)，都會(huì)把事件作為參數(shù)傳遞給回調(diào)函數(shù)，且參數(shù)的位置總是在其他自定義參數(shù)的后面。 React中定義一個(gè)組件，可以通過(guò)React.createClass或者ES6的class。本文討論的React組件是基于class定義的組件。采用cla...

    buildupchao 評(píng)論0 收藏0

  • [ 一起學(xué)React系列 -- 5 ] 如何優(yōu)雅得使用表單控件

    摘要：假如我們從后臺(tái)拉取一個(gè)數(shù)據(jù)要填入輸入框，那么必須得使用受控組件，因?yàn)榉鞘芸亟M件只能被用戶(hù)輸入。不影響正常輸入填充該輸入框的默認(rèn)值，此時(shí)不顯示內(nèi)容。 網(wǎng)頁(yè)中使用的form表單大家肯定都再熟悉不過(guò)了，它主要作用是用來(lái)收集和提交信息。React中的表單組件與我們普通的Html中的表單及其表現(xiàn)形式?jīng)]有什么不同，所以如何使用表單我覺(jué)得再拿出來(lái)說(shuō)可能是畫(huà)蛇添足、毫無(wú)意義。不過(guò)再怎么樣也不能辜負(fù)大家...

    Charlie_Jade 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽(tīng)說(shuō)2017你想寫(xiě)前端？：適合于已經(jīng)度過(guò)了小白階...

    awesome23 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽(tīng)說(shuō)2017你想寫(xiě)前端？：適合于已經(jīng)度過(guò)了小白階...

    antyiwei 評(píng)論0 收藏0

  • 前端資源收集整理

    摘要：工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 工作原因，最近一年斷斷續(xù)續(xù)寫(xiě)了一點(diǎn)前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關(guān)資源匯總 學(xué)習(xí)指導(dǎo) 精華文章 Web前端的路該怎么走？：文章超長(zhǎng)，但是干貨超級(jí)多，值得反復(fù)精讀！ 聽(tīng)說(shuō)2017你想寫(xiě)前端？：適合于已經(jīng)度過(guò)了小白階...

    KavenFan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<