優雅的在React組件中注冊事件

archieyang 發布于2019-08-23 14:01 / 803人閱讀

摘要：前言在的開發中，我們經常需要在上注冊一些事件，比如按下關閉彈窗，按上下鍵選中列表內容等等。比較常見的操作是在組件的時候去上監聽一個事件，在組件的時候停止監聽事件。

前言

在React的開發中，我們經常需要在 window 上注冊一些事件，比如按下 Esc 關閉彈窗，按上下鍵選中列表內容等等。比較常見的操作是在組件 mount 的時候去 window 上監聽一個事件，在組件 unmount 的時候停止監聽事件。下面給大家介紹幾個騷操作。

WindowEventHandler

我們創建一個 WindowEventHandler 組件，內容如下

import PropTypes from "prop-types";
import { Component, PureComponent } from "react";

export default class WindowEventHandler extends (PureComponent || Component) {
  static propTypes = {
    eventName: PropTypes.string.isRequired,
    callback: PropTypes.func.isRequired,
    useCapture: PropTypes.bool,
  };

  static defaultProps = {
    useCapture: false,
  };

  componentDidMount() {
    const { eventName, callback, useCapture } = this.props;
    window.addEventListener(eventName, callback, useCapture);
  }

  componentWillUnmount() {
    const { eventName, callback, useCapture } = this.props;
    window.removeEventListener(eventName, callback, useCapture);
  }

  render() {
    return null;
  }
}

現在比如我們想在組件A中監聽 window 的 resize 事件，我們在 A 組件中可以這么寫

export default class A extends (PureComponent || Component) {
  
  handleResize = () => {
   // dosomething...
  }
  render() {
    return (
        
            我是組件A 
            
        
    );
  }
}

這樣我們在多個組件中就不需要每次都要寫 mount 和 unmount 的鉤子函數了，省了很多事情。

使用裝飾器

我們可以給組件寫一個統一的裝飾器，和之前一樣傳入事件名和方法名就可以監聽，等到組件卸載的時候就停止監聽，代碼如下

export default function windowEventDecorator(eventName, fn) {
    return function decorator(Component) {
        return (...args) => {
            const inst = new Component(...args);
            const instComponentDidMount = inst.componentDidMount ? inst.componentDidMount.bind(inst) : undefined;
            const instComponentWillUnmount = inst.instComponentWillUnmount ? inst.componentWillUnmount.bind(inst) : undefined;

            const callback = (e) => { 
               typeof inst[fn] === "function" && inst[fn](); 
            };
            inst.componentDidMount = () => {
                instComponentDidMount && instComponentDidMount();
                document.body.addEventListener(eventName, callback, true);
            };
            inst.componentWillUnmount = () => {
                instComponentWillUnmount && instComponentWillUnmount();
                document.body.removeEventListener(eventName, callback, true);
            };
            return inst;
        };
    };
}

類似這樣的裝飾器，同理我們想在 A 中監聽 window 的 resize 事件，可以這么寫

@windowEventDecorator("resize", "handleResize");
export default class A extends (PureComponent || Component) {
  
  handleResize = () => {
   // dosomething...
  }
  render() {
    return (
        
            我是組件A 
        
    );
  }
}

總結

這種小技巧提高了開發效率，少寫了很多代碼，可以在項目代碼中嘗試。

GPU云服務器云服務器在php中使用組件 asp中文件上傳組件事件中 php中觸發事件

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

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

優雅的在React項目中使用Redux

摘要：或許你當前的項目還沒有到應用的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢框架狀態管理工具，與沒有任何關系，其他框架也可以使用插件，作用方便在項目中使用中間件，作用支持異步目錄組件目錄或許你當前的項目還沒有到應用Redux的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢？ReactUI框架Redux狀態管理工具，與React沒有任何關系，其他UI框架也...

h9911 2019-08-23 12:58 評論0 收藏0
優雅的在React項目中使用Redux

摘要：或許你當前的項目還沒有到應用的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢框架狀態管理工具，與沒有任何關系，其他框架也可以使用插件，作用方便在項目中使用中間件，作用支持異步目錄組件目錄或許你當前的項目還沒有到應用Redux的程度，但提前了解一下也沒有壞處首先我們會用到哪些框架和工具呢？ReactUI框架Redux狀態管理工具，與React沒有任何關系，其他UI框架也...

PumpkinDylan 2019-07-25 14:31 評論0 收藏0
React事件機制

摘要：注冊事件的回調函數由來統一管理，根據事件的類型和組件標識為唯一標識事件并進行存儲。利用中注入的例如會將原生的事件轉化成合成的事件，然后批量執行存儲的回調函，回調函數的執行分為兩步，第一步是將所有的合成事件放到事件隊列里面，第二步是逐個執行。　　最近在閱讀《深入React技術棧》一書中，發現了之前使用React中并沒有注意到的React事件與瀏覽器原生事件之間的區別，鑒于好久已經沒有寫...

lavnFan 2019-08-20 15:16 評論0 收藏0
在React項目中，如何優雅的優化長列表

摘要：合理的優化長列表，可以提升用戶體驗。這樣保證了無論如何滾動，真實渲染出的節點只有可視區內的列表元素。具體效果如下圖所示對于比無優化的情況，優化后的虛擬列表渲染速度提升很明顯。是基于來實現的，但是是一個維的列表，而不是網狀。 ??對于較長的列表，比如1000個數組的數據結構，如果想要同時渲染這1000個數據，生成相應的1000個原生dom，我們知道原生的dom元素是很復雜的，如果長列表...

yearsj 2019-08-23 13:51 評論0 收藏0