React中events的踩坑指南

本文介绍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 (
    <div>
      测试发布订阅模式加参数：
      <button onClick={handleClick}>点击触发事件</button>
    </div>
  );
} 

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 (
    <div>
      测试发布订阅模式加参数：
      <button onClick={handleClick}>点击触发事件</button>
    </div>
  );
}

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 (
    <div>
      测试发布订阅模式加参数：<br></br>
      <button onClick={handleClick}>点击触发事件</button>
      <br></br>
      <button onClick={() => setState('222')}>点击修改state</button>
      <br></br>
      {state}
    </div>
  );
}

export default MyEvent;

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