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

wean 發布于2019-08-22 17:06 / 3105人閱讀

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

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

例如：

3、阻止默認行為preventDefault

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

  return (
    
      Click me
    
  );
}

4、事件綁定

1、在構造函數中使用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!
        )
    }
}

優點：這種綁定方式 是官方推薦的，在類構造函數中綁定this, 只會生成一個方法實例， 并且綁定一次之后如果多次用到這個方法，也不需要再綁定
缺點：即使不用到state，也需要添加類構造函數來綁定this，代碼量多一點

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

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

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

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

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

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

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

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

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

深入React知識點整理（一）

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

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

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

chemzqm 2019-08-20 14:05 評論0 收藏0
從 0 到 1 實現 React 系列 —— 4.優化setState和ref的實現

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

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

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

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

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

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