为什么在没有第二个参数的情况下将代码包装到 "useEffect" 中并且无需清理?

Why wrap code into "useEffect" without second parameter and nothing to clean up?

在我见过的大多数 React 示例中,人们似乎避免将代码直接放入功能组件的 body 中,而是将其包装到 useEffect(() => {...}) 中。 例如。 in the official docs:

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

为什么这比简单地写更好:

function Example() {
  const [count, setCount] = useState(0);
  document.title = `You clicked ${count} times`;

  return (...);
}

在这两种情况下,文档标题都将在每次渲染时设置。 (我相信 useEffect() 代码在 渲染后执行 ,但这在这个例子中似乎不相关,对吧)

我理解 useEffect() 的价值,如果:

  • 状态作为第二个参数传递,因此代码不会在每次渲染时执行,而是针对指定的状态更改执行。
  • 我们利用清理机制。

但是没有那个?还有理由将您的代码包装到 useEffect() 中吗?

useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

代码应该是这样的,因为现在 useEffect 只会在计数状态发生变化时调用

在此处查看官方文档 about useEffect hookuseEffect 类似于 componentDidMountcomponentDidUpdatecomponentWillUnmount 的组合。它给你任何提示吗?

回答我自己的问题。据我所知,没有理由或理由在代码中没有第二个参数的情况下使用 useEffect()

reactjs.org 上的教程那样使用它的原因似乎只是出于教育原因:他们可能希望您专注于其他事情,而不是将您与第二个参数混淆。然而,这可能会导致(错误的)印象,即第二个参数并不总是必需的。

再一次,这对我来说是一个教训,教程代码并不总是准备好用于实际项目。同样在实际项目中,像 react-hooks/exhaustive-deps 这样的 lint 规则(默认情况下包含在 create-react-app 中)会立即告诉您 useEffect() 没有第二个参数是不行的。