更新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。)
最佳答案
以后可能会造成不一致。
并发模式后,当高优先级任务在 React 生命周期之前到来时,渲染可能会被放弃。
那么此时document.title不等于dom中的值。
在您的情况下,标题可能是 You clicked 2 times
但 dom You clicked 1 times
。
这不是react现在做的(react@16)。但它会发生。
关于javascript - 不带钩子(Hook)地更新文档标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55792038/