react中Suspense，EventEmitter的使用

177 阅读 0 评论 117 点赞

我是靠谱客的博主想人陪飞鸟，这篇文章主要介绍react中Suspense，EventEmitter的使用，现在分享给大家，希望可以做个参考。

(1) Suspense的使用：

import React,{ Suspense } from "react";
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
  return (
    <div className='box'>
      <Suspense fallback={<div>加载中...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

1、LazyComponent是通过懒加载加载的组件，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互。

2、在<LazyComponent />外面使用Suspense标签，并在fallback中声明LazyComponent加载完成前做的事，即可优化整个页面的交互。

3、fallback 属性接受任何在组件加载过程中，展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。也可以用一个 Suspense 组件包裹多个懒加载组件。

(2) EventEmitter的使用

在react中如果有不同的组件需要有事件传递的话，就可以用到这个EventEmitter，EventEmitter依赖于events.

1.下载events模块

npm install events

2.引入EventEmitter

import { EventEmitter } from 'events';

const NoticeEmitter = new EventEmitter();

3.在需要传递数据的组件事件中，使用 NoticeEmitter.emit(‘时间名’，传递的数据1，...,传递的数据n)发射一个事件并传递数据.

import { EventEmitter } from 'events';

const NoticeEmitter = new EventEmitter();

function Children(){

return (

<Button onClick={() => {NoticeEmitter.emit(''transmit','传递的数据') }}>传递数据</Button>

)}

4.在需要接收数据的组件通过NoticeEmitter.addListener（'事件名'，事件处理函数）来接收数据

import React,{ Suspense } from "react";

import { EventEmitter } from 'events';

const NoticeEmitter = new EventEmitter();

class receive extends React.component{

componentDidMount(){
//进行事件监听
NoticeEmitter.addListener("transmit",this.handleTransmit)
}
componentWillMount(){
//取消事件监听
NoticeEmitter.removeListener("transmit",this..handleTransmit)
}

handleTransmit(message){

console.log(message)

}

}