更新没有钩子的文档标题

Question

是否需要使用钩子进行更新document.title？使用useEffectvs. 直接设置标题有什么好处吗？

（此代码段还将标题回显到控制台，因为您无法在 Stack Snippets 中看到文档标题，但在我的实际代码中，我只是更新了标题。）

const { useState } = React;

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

  document.title = `You clicked ${count} times`;
  console.log(document.title);

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

ReactDOM.render(<Example />, document.getElementById('app'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

（注意：这是没有调用的useEffect示例useEffect。）

Answer 1

更新document.title是否需要使用hook？

不会，因为设置两次标题不会造成任何损害。

使用 useEffect 与直接设置标题（如下所示）相比有什么优势吗？

如果你猜useEffect对了，它只会在计数实际发生变化时更新标题。然而，由于组件中只有一种状态，因此只有在计数更新时才会重新渲染，因此在这种情况下没有区别。

如果向下滚动，您会看到您提到的教程在最后将其更改为这样（这将执行我刚才描述的操作）：

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