Question

是否需要使用钩子来更新document.title？与仅按如下所示直接设置标题相比，使用useEffect有什么优势吗？

（此代码段还将标题回显到控制台，因为您无法在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 example，没有进行useEffect调用。）

Answer 1

是否需要使用钩子来更新document.title？

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

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

如果您正确useEffect，则只有在计数实际更改时，它才会更新标题。但是，由于组件中只有一种状态，因此只有在更新计数后才会重新呈现，因此在这种情况下没有任何区别。

如果向下滚动，您将看到您提到的教程最后将其更改为此（将完成我刚才描述的操作）：

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

Answer 2

将来可能会导致不一致。

在并发模式之后，当高优先级任务在响应生命周期之前出现时，渲染可能会被放弃。

这时document.title不等于dom中的值。

在您的情况下，标题可能是You clicked 2 times，而dom是You clicked 1 times。

现在反应不是什么（react @ 16）。但这会发生。

不带钩子更新文档标题

2 个答案: