如何在 React 中加载页面时立即更改页面标题？

Question

我开始从Angular学习React，我在动态更改页面标题时遇到了麻烦，我不知道是否有比我现在做的更好的方法。我在每一页上都有如下钩子:

useEffect(() => {
document.title = {title};
}, []);

但是使用这个钩子我发现了一个问题:当导航到另一个页面时，有一点延迟(略少于一秒)。还有别的办法吗?(我试过反应头盔，但它仍然有一点延迟)

Answer 1

如果你需要同步更改页面标题(即，在浏览器绘制屏幕之前)，你应该使用uselayouteeffect钩子。下面是一个例子:

import React, { useLayoutEffect } from 'react';
function MyComponent() {
useLayoutEffect(() => {
document.title = 'New Page Title';
}, []);
return (
// your component code here
);
}