reactjs - 什么时候使用useEffect？

Question

我目前正在查看 React 文档的 useEffect 示例

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

我的问题是我们可以轻松地为按钮创建一个handleClick 函数。我们不必使用useEffect

const handleButtonClick = () =>{
setCount(count+1)
document.title = `You clicked ${count +1} times`
}

<button onClick={handleButtonClick}/>

那么哪种方式被认为是好的做法呢？最好只使用 useEffect 来触发严格不能与主效果一起完成的副作用(即当组件接收新的 prop 时)

Answer 1

使用 useEffect 钩子(Hook)的想法是执行组件生命周期中需要发生的代码，而不是在特定的用户交互或 DOM 事件上执行。

例如，您希望设置一个计时器，该计时器在组件最初呈现时执行代码，或者如初始示例中所做的那样，文档标题在组件安装时更新，此处没有关联的用户交互

useEffect 是功能组件中类组件中生命周期方法的替代方法。它可用于在组件安装时执行操作，或为组件更新某些 prop 或状态，以及在组件即将卸载时执行代码