React中events的踩坑指南
创始人
2024-06-03 21:06:13
0

本文介绍react项目中如何创建events来进行跨组件事件触发
重点讲解自定义参数传递,和如何拿到最新的state值🌟

创建和触发 events

// 创建event
const addEvent = (type, listener) => {window.addEventListener(type, listener);
};// 清除event
const removeEvent = (type, listener) => {window.removeEventListener(type, listener);
};// 触发event
const dispatch = (type, value?) => {// 触发事件,不传递数据// const event = new Event(type);// 触发事件,并可以传递参数const customEvent = new CustomEvent(type, { detail: value });window.dispatchEvent(customEvent);
};

注意⚠️
● 事件type不区分大小写,就是绑定’click’事件,派发’CLICK’或者’Click’,都会引起listener的执行
● new Event(type),触发事件,不能传递额外参数
● new CustomEvent(type),触发事件,可以传递额外value,我们这里把value放在了e.detail属性上,属性名可以自定义

🪤如何传递参数

点击按钮,打印出传递的参数

// 事件名称是不区分大小写
const EventName = 'myClick';function MyEvent() {// 2 点击按钮,触发事件const handleClick = () => {dispatch(EventName, { name: 'Jack', age: '18' });};// 1/3 执行回调函数const showData = (e) => {// 测试传递数据const data = e?.detail;console.log('传递的参数是', data);};// 1 绑定发布订阅关系useEffect(() => {addEvent(EventName, showData);return () => {removeEvent(EventName, showData);};}, []);return (
测试发布订阅模式加参数:
); } export default MyEvent;

🪤坑2 如何获取上下文state

逻辑:点击触发事件:打印上下文中的变量v1 和 state值

但是第一次点击按钮结果:
v1 is 变量1
state is
第二次点击按钮结果:
v1 is 变量2
state is
问题:拿不到最新的state值!!!

// 事件名称是不区分大小写
const EventName = 'myClick';function MyEvent() {const [state, setState] = useState('');let v1 = '变量1';const handleClick = () => {dispatch(EventName);};const showData = useCallback(() => {// 测试能否获取上下文console.log('v1 is ', v1);console.log('state is ', state); setState('11111');v1 = '变量2';}, [state]);
useEffect(() => {addEvent(EventName, showData);return () => {removeEvent(EventName, showData);};}, []);return (
测试发布订阅模式加参数:
); }export default MyEvent;

但是showData中为什么拿不到最新的state值呢?更准确的说,是回调函数showData中拿不到最新的值。
● 检查一下代码第27行,绑定回调函数是在页面第一次渲染时,
● 之后虽然state变化,但是之前绑定的回调函数不会变化
● 触发事件时,执行的还是页面第一次渲染时绑定的showData,里面的state还是页面第一次渲染时的state
正确代码

// 事件名称是不区分大小写
const EventName = 'myClick';function MyEvent() {const [state, setState] = useState('');let v1 = '变量1';const showData = useCallback(() => {// 测试能否获取上下文console.log('v1 is ', v1);console.log('state is ', state);setState('11111');v1 = '变量2';}, [state]);const handleClick = () => {dispatch(EventName);};useEffect(() => {addEvent(EventName, showData);return () => {removeEvent(EventName, showData);};}, [showData]); return (
测试发布订阅模式加参数:





{state}
); }export default MyEvent;

关于以上代码,可能又同学要问:
● 是state变化引起的showData的变化,那么27行useEffect的依赖项写state可以吗?
可以,但不建议。如果showData函数依赖很多state,每次都一个一个写,容易遗漏,也不直观
● useEffect的依赖项是个函数,导致重复渲染怎么办
useEffect对于依赖项是直接对值进行的比较。也就是意味着函数对比的话,就是地址进行比较,显然,每次创建的函数地址都是不同的。不仅仅是state变化,每一次值的改变,都会导致函数改变,所以需要给showData加缓存,如第8行,用useCallback包了一层

相关内容

热门资讯

稳定币发行商Circle为何想...   稳定币发行商 Circle(CRCL)在周一晚间的新闻公告中表示,已正式向美国货币监理署(OCC...
北京至沈阳高铁最快仅需2小时2... 转自:千龙网2025年铁路暑期运输昨日(1日)启动,自7月1日开始至8月31日止,共计62天。国铁北...
蒋连生:锻造过硬作风 担当时代... 转自:梧州发布原标题:蒋连生在讲授深入贯彻中央八项规定精神学习教育专题党课时强调锻造过硬作风 担当时...
7月6日-18日第一次填报   本报讯 昨日,省考试局发布中招志愿填报指南,明确我省中招考生志愿实行考后知分、知排位、网上填报的...
Remark融资1600万美元...   从事人工智能驱动的电商工具开发的初创公司,往往依赖外部数据或用户信号来构建和改进其模型。然而,一...
男生日记的读后感 男生日记的读后感暑假里,妈妈就给我了一本《男生日记》,这部书的主人公吴缅,是个有个性、有责任、还爱冒...
传奇3G武器如何升级? 传奇3G武器如何升级?传奇3G武器如何升级到MAX15+?影响武器升级主要是以下五项内容:(每一项占...
尼斯湖水怪之谜和百慕大三角洲之... 尼斯湖水怪之谜和百慕大三角洲之谜有哪些传闻?请大家介绍介绍,谢谢大家啦,o(∩_∩)o...哈哈关于...
动漫《我的青春恋爱物语果然有问... 动漫《我的青春恋爱物语果然有问题》第三季 什么时候能出看官网吧,他们都没说这要看官方。
移动手机怎么样呼叫转移到声讯台... 移动手机怎么样呼叫转移到声讯台的!fghdfhd不能转移到这样的号码的 转移不过去的