Question

我对使用效果的工作原理没有什么困惑。

 const recordMouse = e => {
      setX(e.clientX)
      setY(e.clientY)
 }
 useEffect(() => {
      window.addEventListener('mousemove',recordmouse)  
 },[])

当我们提供一个空的依赖数组时，useEffect 在第一次渲染时运行，如果我没记错的话，但在这里我发现我正在获取每个鼠标位置。有人能解释一下发生了什么吗。

Answer 1

你可以试试这样的

  const [x, setX] = useState();
  const [y, setY] = useState();

  const recordMouse = e => {
      setX(e.clientX)
      setY(e.clientY)
 }

 return (
   <div onMouseMove={recordMouse}>
     content
   </div>
 )

Answer 2

只有一个mouseover事件绑定，但是每次触发recordMouse都会执行回调（mouseover）。

它与useEffect无关，你可以用vanilla javascript试试。

在 react.js 中使用 useEffect 钩子。 useEffect 依赖数组部分的问题

2 个答案: