优雅的在React组件中注册事件

archieyang 发布于2019-08-23 14:01 / 642人阅读

摘要：前言在的开发中，我们经常需要在上注册一些事件，比如按下关闭弹窗，按上下键选中列表内容等等。比较常见的操作是在组件的时候去上监听一个事件，在组件的时候停止监听事件。

前言

在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中触发事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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