国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《深入react技術(shù)?！穼W(xué)習(xí)筆記（三）漫談React

isLishude / 3444人閱讀

摘要：前言接下來讓我們進(jìn)入新的章節(jié)漫談。正文一事件系統(tǒng)的事件系統(tǒng)事件系統(tǒng)符合標(biāo)準(zhǔn)，不存在任何兼容性問題，并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動(dòng)綁定到最外層。組織事件冒泡的行為只適用于合成系統(tǒng)中，且沒辦法阻止原生事件冒泡。

前言

接下來讓我們進(jìn)入新的章節(jié)：漫談React。
本篇文章主要講React事件系統(tǒng)和表單操作。

正文 一：事件系統(tǒng)

1.react的事件系統(tǒng)
react事件系統(tǒng)符合W3school標(biāo)準(zhǔn)，不存在任何IE兼容性問題，并且與原生的瀏覽器事件一樣有同樣的API接口。同樣支持事件的冒泡機(jī)制，我們可以使用stopPropagation()和preventDefault()來終止它。
所有的事件都自動(dòng)綁定到最外層。如果需要訪問原生事件對象，可以使用nativeEvent屬性。

2.合成事件
（1）事件委派
react把所有事件綁定到結(jié)構(gòu)的最外層，使用一個(gè)同意的事件監(jiān)聽器，這個(gè)事件監(jiān)聽器上維持了一個(gè)映射來保存所有組件內(nèi)部的事件監(jiān)聽和處理函數(shù)。
（2）自動(dòng)綁定
在react組件中，每個(gè)方法的上下文都會(huì)指向該組件的實(shí)例，即自動(dòng)綁定this為當(dāng)前組件。但是在使用ES6 classes或者純函數(shù)時(shí)這種自動(dòng)綁定就不復(fù)存在，需要手動(dòng)實(shí)現(xiàn)this的綁定。
（3）綁定方法
3-1：bind方法：可以幫助我們綁定事件處理完器內(nèi)的this，并且可以向事件處理器中傳入?yún)?shù)，比如：

import React,{Component} from "react"
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return ;
    }
}

3-2構(gòu)造器內(nèi)聲明（推薦）：在組件的構(gòu)造器內(nèi)完成對事件的綁定。

class App extends Component{
    handleClick(e){
        console.log(e);
        this.handleClick=this.handleClick.bind(this);
    }
    render(){
            return ;
        }
}

3-3箭頭函數(shù):它自動(dòng)綁定了定義此函數(shù)作用域的this。

class App extends Component{
   const handleClick= (e)=>{
        console.log(e);
    }
    render(){
            return ;
        }
}或
import React,{Component} from "react"
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return ;
    }
}

3.原生事件
componenDidMount會(huì)在組件已經(jīng)完成安裝并且在瀏覽器存在真實(shí)的 DOM后調(diào)用，此時(shí)我們就可以完成對原生事件的綁定。

import React,{Component} from "react"
class nativeEventDemo extends Component{
    componentDidMount(){
        this.refs.button.addEventListener("click",e=>{
            handleClick(e);
        })
    }
    handleClick(e){
        console.log(e);
    }
    componentWillUnmount(){
        this.refs.button.removeEventListener("click");
    }
    render(){
        return 
    }
}

注意：在react中使用DOM原生事件時(shí)，一定要在組件卸載時(shí)手動(dòng)移除，否則可能出現(xiàn)內(nèi)存泄漏問題。

4.混合事件

我們無法在組件中將事件綁定到組件范圍之外的區(qū)域，只能使用原生事件來實(shí)現(xiàn)。

但是，盡量在React中混用合成事件和原生DOM事件：用reactEvent.nativeEvent.stopPropagatoin()來阻止事件冒泡是不行的。組織React事件冒泡的行為只適用于React合成系統(tǒng)中，且沒辦法阻止原生事件冒泡。反之，在原生事件中阻止事件冒泡，卻可以阻止React事件的傳播。

對于無法使用React的合成事件系統(tǒng)的場景，我們還需要使用原生事件來完成。

二：表單

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86943.html

相關(guān)文章

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見，通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    neuSnail 評論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見，通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    wyk1184 評論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見，通過機(jī)制傳遞即可。我們應(yīng)該聽說過高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過程中總結(jié)出來的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    junnplus 評論0 收藏0

  • 《深入react技術(shù)棧》學(xué)習(xí)筆記（二）初入React世界

    摘要：用于規(guī)范的類型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù)，通常是通過與用戶的交互來更改的。為了實(shí)現(xiàn)的修改，需要注冊事件處理程序到相應(yīng)的元素上。當(dāng)事件發(fā)生時(shí)，將更新后的值是從中檢索，并通知組件。通常情況下，該函數(shù)初始化狀態(tài)使用，，或其他數(shù)據(jù)存儲。 前言 上一篇文章中，我們講到了JSX的一些用法和注意事項(xiàng)，這次我們來講react中最基礎(chǔ)也是特別重要的內(nèi)容：組件。這篇文章包含組件的以下內(nèi)容：狀態(tài)、屬...

    MRZYD 評論0 收藏0

  • 《深入react技術(shù)棧》學(xué)習(xí)筆記（一）初入React世界

    摘要：前言以深入學(xué)習(xí)技術(shù)棧為線索，記錄下學(xué)習(xí)的重要知識內(nèi)容。要傳入時(shí)，必須使用屬性表達(dá)式。如果要使用自定義屬性，要使用前綴這與標(biāo)準(zhǔn)是一致的。 前言 以《深入學(xué)習(xí)react技術(shù)?！窞榫€索，記錄下學(xué)習(xí)React的重要知識內(nèi)容。本系列文章沒有涵蓋全部的react知識內(nèi)容，只是記錄下了學(xué)習(xí)之路上的重要知識點(diǎn)，一方面是自己的總結(jié)，同時(shí)拿出來和在學(xué)習(xí)react的人們一塊分享，共同進(jìn)步。 正文 一：rea...

    verano 評論0 收藏0

發(fā)表評論

0條評論

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