javascript - 如何在函数式 React 组件中创建静态函数？

Question

我正在尝试在功能性 React 组件中添加和删除事件监听器。监听器添加得很好，但在需要时不会被删除。我认为问题在于我引用的函数 handlemousemove 是在每个组件渲染时重新创建的，因此当removeEventListener 尝试删除它时，它与 addEventListener 添加它时的函数引用不同。

我尝试将 handlemousemove 移出组件，但它需要访问组件中生成的 setState Hook 。

const handleMouseMove = e => {
    setYOffset(e.clientY-280)
    setXOffset(e.clientX-350)
}

const followMouse = () => {
    if (isFollowingMouse){
        setIsFollowingMouse(false)
        document.removeEventListener("mousemove", handleMouseMove)
    } else {
        setIsFollowingMouse(true)
        document.addEventListener("mousemove", handleMouseMove)
    }
}

...

<button name="mouse" onClick={followMouse}>
    Follow Mouse
</button>

所有执行分支都会在此处命中，但 document.removeEventListener("mousemove", handleMouseMove) 实际上并未删除事件监听器。

有没有办法在功能组件中拥有“静态方法”？这还是这里的问题吗？

这里是代码沙箱的链接，其中包含完整代码:https://codesandbox.io/s/pzrwh

Answer 1

旧的方法是使用 render props ，但现在钩子(Hook)已经到达 this is a better solution

const MyComponent = (props) => {
    const [isFollowingMouse, setIsFollowingMouse] = React.useState(false);
    const [xOffset, setXOffset] = React.useState(0);
    const [yOffset, setYOffset] = React.useState(0);
    
    const handleMouseMove = e => {
        if (isFollowingMouse) {
            setYOffset(e.clientY-28);
            setXOffset(e.clientX-35);
        }
    };

    const followMouse = () => {
        setIsFollowingMouse(!isFollowingMouse);
    }

    const styles = {
        'cat': {
            'backgroundColor': 'red',
            'height': '20px',
            'position': 'absolute',
            'left': xOffset,
            'top': yOffset,
            'width': '20px',
            'display': isFollowingMouse ? 'block' : 'none'
        }
    };

    return (
      <div style={{ 'height': '100%' }} onMouseMove={handleMouseMove}>
        <div style={ styles.cat }>C</div>
        <button name="mouse" onClick={followMouse}>
          Follow Mouse
        </button>
      </div>
    )
}



ReactDOM.render(<MyComponent />, document.getElementById('root'));

html,
body,
#root {
    height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>