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

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

我們創(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 事件，我們在 A 組件中可以這么寫

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

            我是組件A 
            
        
    );
  }
}

這樣我們在多個(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 
        
    );
  }
}

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