javascript - 不带钩子(Hook)地更新文档标题

Question

更新document.title是否需要使用钩子(Hook)？使用 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 调用的 useEffect example。)

Answer 1

以后可能会造成不一致。

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

那么此时document.title不等于dom中的值。

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

这不是react现在做的(react@16)。但它会发生。