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

資訊專(zhuān)欄INFORMATION COLUMN

react 代碼優(yōu)化(一) ——事件處理

wean / 3113人閱讀

摘要：的事件處理的事件綁定屬性的命名要采用駝峰時(shí)寫(xiě)法，不能小寫(xiě)要傳入一個(gè)函數(shù)作為事件處理函數(shù)，不能是字符串例如阻止默認(rèn)行為阻止默認(rèn)行為事件綁定在構(gòu)造函數(shù)中使用綁定優(yōu)點(diǎn)這種綁定方式是官方推薦的，在類(lèi)構(gòu)造函數(shù)中綁定只會(huì)生成一個(gè)方法實(shí)例，并且綁定一次之

React的事件處理 1、React 的事件綁定屬性的命名要采用駝峰時(shí)寫(xiě)法， 不能小寫(xiě) 2、要傳入一個(gè)函數(shù)作為事件處理函數(shù)，不能是字符串 
例如：
3、阻止默認(rèn)行為preventDefault 
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  //阻止默認(rèn)行為
    console.log("The link was clicked.");
  }

  return (
    
      Click me
    
  );
}
4、事件綁定 
1、在構(gòu)造函數(shù)中使用bind綁定this
class Introduce extends React.Component {
    constructor (props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick() {
        console.log("hello")
    }
    
    render() {
        return (
            
click me!

        )
    }
}

優(yōu)點(diǎn)：這種綁定方式 是官方推薦的，在類(lèi)構(gòu)造函數(shù)中綁定this, 只會(huì)生成一個(gè)方法實(shí)例， 并且綁定一次之后如果多次用到這個(gè)方法，也不需要再綁定
缺點(diǎn)：即使不用到state，也需要添加類(lèi)構(gòu)造函數(shù)來(lái)綁定this，代碼量多一點(diǎn)
2、使用屬性初始化器語(yǔ)法綁定this(實(shí)驗(yàn)性)
class Introduce extends React.Component {
    handleClick = () => {
        console.log("hello")
    }
    render() {
        return (
            
click me!

        )
    }
}
這種屬性初始化語(yǔ)法，將方法初始化為箭頭函數(shù)，因此在創(chuàng)建函數(shù)的時(shí)候就綁定了this，無(wú)需再次綁定，這種需要結(jié)合babel轉(zhuǎn)義，很方便
3、在調(diào)用的時(shí)候使用bind綁定this
class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
            
click me!

        )
    }
}
4、在調(diào)用的時(shí)候使用箭頭函數(shù)綁定this
class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
            
 this.handleClick()}>click me!

        )
    }
}
3、4這種方式會(huì)有性能影響并且如果回調(diào)函數(shù)作為屬性傳給子組件的時(shí)候會(huì)導(dǎo)致重新渲染的問(wèn)題 
綜上，方式一是官方推薦的，方式二是我們用起來(lái)比較好用的 也結(jié)合了 方式1、3、4的優(yōu)點(diǎn)

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

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

相關(guān)文章

  • 深入React知識(shí)點(diǎn)整理（一）

    摘要：以我自己的理解，函數(shù)式編程就是以函數(shù)為中心，將大段過(guò)程拆成一個(gè)個(gè)函數(shù)，組合嵌套使用。越來(lái)越多的跡象表明，函數(shù)式編程已經(jīng)不再是學(xué)術(shù)界的最?lèi)?ài)，開(kāi)始大踏步地在業(yè)界投入實(shí)用。也許繼面向?qū)ο缶幊讨螅瘮?shù)式編程會(huì)成為下一個(gè)編程的主流范式。 使用React也滿(mǎn)一年了，從剛剛會(huì)使用到逐漸探究其底層實(shí)現(xiàn)，以便學(xué)習(xí)幾招奇技淫巧從而在自己的代碼中使用，寫(xiě)出高效的代碼。下面整理一些知識(shí)點(diǎn)，算是React看書(shū)...

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

  • 淺析React之事件系統(tǒng)（一）

    摘要：合成事件的使用方式在中不會(huì)把所有的事件處理器綁定到相應(yīng)的真實(shí)的節(jié)點(diǎn)上，而是使用一個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器，把所有的事件綁定在最外層。在之前開(kāi)發(fā)者需要為了優(yōu)化性能需要自己來(lái)優(yōu)化自己的事件處理器的代碼，現(xiàn)在幫助你完成了這些工作。 大家周末好，2016年的最后幾篇文章開(kāi)始寫(xiě)到了React的一些東西，那么最近就來(lái)一些圖表君對(duì)于React的簡(jiǎn)單總結(jié)和理解，那么今天就開(kāi)始第一篇，說(shuō)一說(shuō)React的事件系...

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

  • 從 0 到 1 實(shí)現(xiàn) React 系列 —— 4.優(yōu)化setState和ref的實(shí)現(xiàn)

    摘要：異步渲染利用事件循環(huán)，延遲渲染函數(shù)的調(diào)用調(diào)用回調(diào)函數(shù)處理后跟函數(shù)的情況淺合并邏輯事件循環(huán)，關(guān)于的事件循環(huán)和的事件循環(huán)后續(xù)會(huì)單獨(dú)寫(xiě)篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源碼一個(gè)痛處是會(huì)陷進(jìn)理不順主干的困局中，本系列文章在實(shí)現(xiàn)一個(gè) (x)react 的同時(shí)理順 Rea...

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

  • 談?wù)?em>React事件機(jī)制和未來(lái)(react-events)

    摘要：另外第三方也可以通過(guò)的事件插件機(jī)制來(lái)合成自定義事件，盡管很少人這么做。抽象跨平臺(tái)事件機(jī)制。打算干預(yù)事件的分發(fā)。事件是的一個(gè)自定義事件，旨在規(guī)范化表單元素的變動(dòng)事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 當(dāng)我們?cè)诮M件上設(shè)置事件處理器時(shí)，React并不會(huì)在該DOM元素上直接綁定...

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

  • React學(xué)習(xí)之漫談React

    摘要：事件系統(tǒng)合成事件的綁定方式合成事件的實(shí)現(xiàn)機(jī)制事件委派和自動(dòng)綁定。高階組件如果已經(jīng)理解高階函數(shù)，那么理解高階組件也很容易的。例如我們常見(jiàn)的方法等都是高階函數(shù)。對(duì)測(cè)試群眾來(lái)說(shuō)，從質(zhì)量保證的角度出發(fā)，單元測(cè)試覆蓋率是 事件系統(tǒng) 合成事件的綁定方式 `Test` 合成事件的實(shí)現(xiàn)機(jī)制：事件委派和自動(dòng)綁定。 React合成事件系統(tǒng)的委托機(jī)制，在合成事件內(nèi)部?jī)H僅是對(duì)最外層的容器進(jìn)行了綁定，并且依賴(lài)...

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

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

0條評(píng)論

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