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

wean 發(fā)布于2019-08-22 17:06 / 3151人閱讀

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

React的事件處理 1、React 的事件綁定屬性的命名要采用駝峰時寫法，不能小寫 2、要傳入一個函數(shù)作為事件處理函數(shù)，不能是字符串

例如：

3、阻止默認行為preventDefault

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  //阻止默認行為
    console.log("The link was clicked.");
  }

  return (
    
      Click me
    
  );
}

4、事件綁定

1、在構造函數(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)點：這種綁定方式 是官方推薦的，在類構造函數(shù)中綁定this, 只會生成一個方法實例， 并且綁定一次之后如果多次用到這個方法，也不需要再綁定
缺點：即使不用到state，也需要添加類構造函數(shù)來綁定this，代碼量多一點

2、使用屬性初始化器語法綁定this(實驗性)

class Introduce extends React.Component {
    handleClick = () => {
        console.log("hello")
    }
    render() {
        return (
            click me!
        )
    }
}
這種屬性初始化語法，將方法初始化為箭頭函數(shù)，因此在創(chuàng)建函數(shù)的時候就綁定了this，無需再次綁定，這種需要結合babel轉義，很方便

3、在調用的時候使用bind綁定this

class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
            click me!
        )
    }
}

4、在調用的時候使用箭頭函數(shù)綁定this

class Introduce extends React.Component {
    handleClick() {
        console.log("hello")
    }
    render() {
        return (
             this.handleClick()}>click me!
        )
    }
}
3、4這種方式會有性能影響并且如果回調函數(shù)作為屬性傳給子組件的時候會導致重新渲染的問題 
綜上，方式一是官方推薦的，方式二是我們用起來比較好用的 也結合了 方式1、3、4的優(yōu)點

GPU云服務器云服務器事件處理程序待處理事件多個事件處理事件處理模型有

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/94859.html

深入React知識點整理（一）

摘要：以我自己的理解，函數(shù)式編程就是以函數(shù)為中心，將大段過程拆成一個個函數(shù)，組合嵌套使用。越來越多的跡象表明，函數(shù)式編程已經不再是學術界的最愛，開始大踏步地在業(yè)界投入實用。也許繼面向對象編程之后，函數(shù)式編程會成為下一個編程的主流范式。使用React也滿一年了，從剛剛會使用到逐漸探究其底層實現(xiàn)，以便學習幾招奇技淫巧從而在自己的代碼中使用，寫出高效的代碼。下面整理一些知識點，算是React看書...

Gilbertat 2019-08-22 11:18 評論0 收藏0
淺析React之事件系統(tǒng)（一）

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

chemzqm 2019-08-20 14:05 評論0 收藏0
從 0 到 1 實現(xiàn) React 系列 —— 4.優(yōu)化setState和ref的實現(xiàn)

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

wangdai 2019-08-23 10:43 評論0 收藏0
談談React事件機制和未來(react-events)

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

TNFE 2019-08-26 10:32 評論0 收藏0
React學習之漫談React

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

darkbug 2019-08-23 18:38 評論0 收藏0