如何通过按钮点击触发React的useEffect钩子？

我是React新手，抱歉提出这个可能很简单的问题。

假设我有以下代码：

const myComponent = () => {

    const [someVar, setSomeVar] = useState(0);

    // Other code

    useEffect(() => {
    
        // Do something
    
    }, [someVar]);

        
    return (
        <button>Hello</button>
    )
}

目前一切正常，每当someVar发生变化时，useEffect就会执行。

现在，我想实现如下需求：

const myComponent = () => {

    const [someVar, setSomeVar] = useState(0);

    // Other code

    useEffect(() => {
    
        // Do something
    
    }, [<button with ID helloButton clicked>]);  // <--------- 这是我想要的效果

        
    return (
        <button
            id="helloButton"
            onClick={() => {
                // Do on click related stuff
            }}
        >
            Hello
        </button>
    )
}

如上述伪代码所示，我希望useEffect能在检测到用户点击ID为helloButton的按钮时触发，请问这是否可行？

没法直接把按钮点击事件放进useEffect的依赖数组实现这个需求，但可以通过两种简单方式达成目标：

• 用状态变量中转
  新增一个追踪按钮点击的状态，点击按钮时更新这个状态，再把它放进useEffect的依赖数组：

  const myComponent = () => {
      const [someVar, setSomeVar] = useState(0);
      const [buttonClicked, setButtonClicked] = useState(0);
  
      // Other code
  
      useEffect(() => {
          // 这里就是点击按钮后要执行的逻辑
          // Do something
      }, [buttonClicked]);
  
      return (
          <button
              id="helloButton"
              onClick={() => {
                  // Do on click related stuff
                  setButtonClicked(prev => prev + 1);
              }}
          >
              Hello
          </button>
      )
  }
  

  这里用递增数字而不是布尔值，是为了避免重复点击相同状态时useEffect不触发的问题，也可以用时间戳替代。

• 直接在点击回调里执行逻辑
  如果useEffect里的逻辑不需要依赖其他状态或副作用，完全可以直接把逻辑写在按钮的onClick回调里，没必要绕useEffect：

  const myComponent = () => {
      const [someVar, setSomeVar] = useState(0);
  
      const handleClick = () => {
          // Do on click related stuff
          // 直接执行原本要放在useEffect里的逻辑
          // Do something
      }
  
      return (
          <button
              id="helloButton"
              onClick={handleClick}
          >
              Hello
          </button>
      )
  }
  

本质上，useEffect的依赖数组只能放React状态、props或其他会触发组件重渲染的变量，不能直接绑定DOM事件。用状态中转是最贴合React思维的实现方式。

内容的提问来源于stack exchange，提问作者Greeso