成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

優(yōu)雅的在React組件中注冊(cè)事件

archieyang / 838人閱讀

摘要：前言在的開發(fā)中，我們經(jīng)常需要在上注冊(cè)一些事件，比如按下關(guān)閉彈窗，按上下鍵選中列表內(nèi)容等等。比較常見的操作是在組件的時(shí)候去上監(jiān)聽一個(gè)事件，在組件的時(shí)候停止監(jiān)聽事件。

前言

在React的開發(fā)中，我們經(jīng)常需要在 window 上注冊(cè)一些事件， 比如按下 Esc 關(guān)閉彈窗， 按上下鍵選中列表內(nèi)容等等。比較常見的操作是在組件 mount 的時(shí)候去 window 上監(jiān)聽一個(gè)事件， 在組件 unmount 的時(shí)候停止監(jiān)聽事件。下面給大家介紹幾個(gè)騷操作。

WindowEventHandler

我們創(chuàng)建一個(gè) WindowEventHandler 組件， 內(nèi)容如下

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;
  }
}

現(xiàn)在比如我們想在組件A中監(jiān)聽 window 的 resize 事件，我們?cè)?A 組件中可以這么寫

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

            我是組件A 
            
        

    );
  }
}

這樣我們?cè)诙鄠€(gè)組件中就不需要每次都要寫 mount 和 unmount 的鉤子函數(shù)了，省了很多事情。

使用裝飾器

我們可以給組件寫一個(gè)統(tǒng)一的裝飾器，和之前一樣傳入事件名和方法名就可以監(jiān)聽，等到組件卸載的時(shí)候就停止監(jiān)聽，代碼如下

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 中監(jiān)聽 window 的 resize 事件，可以這么寫

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

            我是組件A 
        

    );
  }
}
總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99953.html

相關(guān)文章

  • 優(yōu)雅的在React項(xiàng)目中使用Redux

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

    h9911 評(píng)論0 收藏0

  • 優(yōu)雅的在React項(xiàng)目中使用Redux

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

    PumpkinDylan 評(píng)論0 收藏0

  • React事件機(jī)制

    摘要：注冊(cè)事件的回調(diào)函數(shù)由來(lái)統(tǒng)一管理，根據(jù)事件的類型和組件標(biāo)識(shí)為唯一標(biāo)識(shí)事件并進(jìn)行存儲(chǔ)。利用中注入的例如會(huì)將原生的事件轉(zhuǎn)化成合成的事件，然后批量執(zhí)行存儲(chǔ)的回調(diào)函，回調(diào)函數(shù)的執(zhí)行分為兩步，第一步是將所有的合成事件放到事件隊(duì)列里面，第二步是逐個(gè)執(zhí)行。 　　最近在閱讀《深入React技術(shù)棧》一書中，發(fā)現(xiàn)了之前使用React中并沒(méi)有注意到的React事件與瀏覽器原生事件之間的區(qū)別，鑒于好久已經(jīng)沒(méi)有寫...

    lavnFan 評(píng)論0 收藏0

  • 在React項(xiàng)目中，如何優(yōu)雅的優(yōu)化長(zhǎng)列表

    摘要：合理的優(yōu)化長(zhǎng)列表，可以提升用戶體驗(yàn)。這樣保證了無(wú)論如何滾動(dòng)，真實(shí)渲染出的節(jié)點(diǎn)只有可視區(qū)內(nèi)的列表元素。具體效果如下圖所示對(duì)于比無(wú)優(yōu)化的情況，優(yōu)化后的虛擬列表渲染速度提升很明顯。是基于來(lái)實(shí)現(xiàn)的，但是是一個(gè)維的列表，而不是網(wǎng)狀。 ??對(duì)于較長(zhǎng)的列表，比如1000個(gè)數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想要同時(shí)渲染這1000個(gè)數(shù)據(jù)，生成相應(yīng)的1000個(gè)原生dom，我們知道原生的dom元素是很復(fù)雜的，如果長(zhǎng)列表...

    yearsj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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