react 里面的 useEffectEvent 的执行原理是怎样的?

作者站长头像
站长
· 阅读数 20
import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(true);

  const onMove = useEffectEvent(e => {
    if (canMove) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  });

  useEffect(() => {
    window.addEventListener('pointermove', onMove);
    return () => window.removeEventListener('pointermove', onMove);
  }, []);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={e => setCanMove(e.target.checked)}
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

useEffect 的依赖项使用了 [],那么内部的 effect 函数只会在初始渲染时执行,那么监听的 onMove 函数应该第一次组件函数执行时创建的 onMove,如果把 useEffectEvent 去掉,那么 canMove 也应该是第一次渲染时使用的 canMove,之后切换 canMove 是不会改变 canMove 的值的。如果使用了 useEffectEvent, 那么 canMove 会跟着切换的 canMove 变化的,useEffectEvent 是怎么实现总是读取到最新的状态值的?

回复
1个回答
avatar
test
2024-06-20

你可以理解为保证函数引用,但是函数内部状态依旧更新,类似这段伪代码

function useEffectEvent(handler) {
  const handlerRef = useRef(null);
  useLayoutEffect(() => {
    handlerRef.current = handler;
  });

  return useCallback((...args) => {
    const fn = handlerRef.current;
    return fn(...args);
  }, []);
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容