《深入react技術棧》學習筆記（三）漫談React

isLishude 發布于2019-08-21 11:38 / 3440人閱讀

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

前言

接下來讓我們進入新的章節：漫談React。
本篇文章主要講React事件系統和表單操作。

正文 一：事件系統

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

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

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

3-2構造器內聲明（推薦）：在組件的構造器內完成對事件的綁定。

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

3-3箭頭函數:它自動綁定了定義此函數作用域的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會在組件已經完成安裝并且在瀏覽器存在真實的 DOM后調用，此時我們就可以完成對原生事件的綁定。

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原生事件時，一定要在組件卸載時手動移除，否則可能出現內存泄漏問題。

4.混合事件

我們無法在組件中將事件綁定到組件范圍之外的區域，只能使用原生事件來實現。

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

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

二：表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86943.html

react進階漫談

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

neuSnail 2019-08-20 14:16 評論0 收藏0
react進階漫談

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

wyk1184 2019-08-30 15:52 評論0 收藏0
react進階漫談

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

junnplus 2019-08-01 16:17 評論0 收藏0
《深入react技術棧》學習筆記（二）初入React世界

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

MRZYD 2019-08-20 14:47 評論0 收藏0
《深入react技術棧》學習筆記（一）初入React世界

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

verano 2019-08-20 14:47 評論0 收藏0