react通信方式之eventEmitter，解决取消订阅失效的问题

eventEmitter

自定义事件，类比vue里的pubsub.开发订阅者模式
使用说明：
import { EventEmitter } from ‘events’;
eventEmitter = new EventEmitter();
发布：eventEmitter.emit(‘事件名’,回调函数)
订阅：eventEmitter.on(‘事件名’,回调函数) 或者 eventEmitter.addListener(‘事件名’,回调函数)
取消订阅：eventEmitter.off(‘事件名’,函数) 或者 eventEmitter.removeListener(‘事件名’,回调函数)
全部取消：eventEmitter.removeAllListener(‘事件名’)

      注：
      失效的几种情况：
      1、不能通过箭头函数来订阅和取消订阅。因为每个箭头函数指向的地址不一样，因此无法取消。
      2、在函数式组件里，直接写函数名eventEmitter.off('事件名',函数名)，也是没用的。因为函数组件重新加载会导致回调函数的更新。指向的不再是同一个。因此无法取消了。
    
      解决办法：
      1、函数式组件里，用removeAllListener('事件名')。全部取消。
      2、用类式组件   这样回调函数就不会更新，地址一直是同一个
      
      补充：on 和 addListener作用相同。off 和 removeListener作用相同

函数式组件

export default function Test2() {
	const [event_params, setevent_params] = useState(500);
//指定的回调函数
	function getFriut(mes) {
		setevent_params(mes);
	}
	useEffect(() => {
	//订阅
		eventEmmiter.addListener('friut', getFriut);
	}, []);

	return (
		<div style={{ border: '2px solid red', height: '400px' }} id={'Test2'}>
			我是2号子组件,接收消息
			{event_params}
			<br />
			<button
				onClick={() => {
				//取消订阅  ----无效方法
				// 我们声明的 getFriut 是直接定义了一个方法，这也就导致只要是父组件重新渲染（状态或者props更新）就会导致这里声明出一个新的方法，新的方法和旧的方法尽管长的一样，但是依旧是两个不同的对象,同理，箭头函数也是如此
					eventEmmiter.removeListener('friut', getFriut);
              //全部取消 ----解决方案1
					// eventEmmiter.removeAllListeners('friut');
				}}
			>
				点击取消订阅
			</button>
		</div>
	);
}

类式组件

export default class Test2 extends Component {
	state = {
		event_params: 'lalal',
	};
	//指定的回调函数
	getFriut = (mes) => {
		this.setState({ event_params: mes });
	};
	componentDidMount() {
	//订阅
		eventEmmiter.addListener('friut', this.getFriut);
	}
	render() {
		return (
			<div style={{ border: '2px solid red', height: '400px' }} id={'Test2'}>
				我是2号子组件,接收消息
				{this.state.event_params}
				<br />
				<button
					onClick={() => {
					//取消订阅  -----解决方案2
						eventEmmiter.removeListener('friut', this.getFriut);
						
					}}
				>
					点击取消订阅
				</button>

			</div>
		);
	}
}

最后

以上就是高挑金鱼为你收集整理的react通信方式之eventEmitter，解决取消订阅失效的问题的全部内容，希望文章能够帮你解决react通信方式之eventEmitter，解决取消订阅失效的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。