我创建了一个服务器端的React应用程序，它会返回如下所示的HTML：
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
我看到很多人都在使用react-helmet来管理标签中的内容。我想知道使用它的好处是什么，因为我可以直接像上面展示的那样包含它。
使用 react-helmet 的一个重要优点是当你在树中有多个带有 <head> 标签的组件，并且这些组件带有相同属性/值的 <meta> 标签时。
例如，如果在你的首页组件中有：
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
但是在一个叶子页面组件上，您还有一个包含标签的<head>标签：
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
请注意，在我们的两个页面组件之间，有两个具有相同属性值name="description"的meta标签。你可能会认为这会导致重复，但是react-helmet解决了这个问题。
如果有人进入叶子页面，react-helmet会覆盖索引/站点级别的描述meta标签，并呈现较低级别的标签，即专门针对叶子页面的标签。
它还将包含viewport meta标签，因为它不需要被覆盖。
由于react-helmet，在叶子页面上，<head>将如下所示：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
react-helmet 允许设置元标签，这些元标签将被搜索引擎和社交媒体爬虫读取。这使得服务器端渲染和 React Helmet 成为创造既适合 SEO 又适合社交媒体的应用程序的动态二人组。
例如：
import { Helmet } from 'react-helmet';
<Helmet>
<title>Turbo Todo</title>
<meta name="description" content="test on react-helmet" />
<meta name="theme-color" content="#ccc" />
</Helmet>
两种方法都可以实现。但是使用react-helmet，head标签也被视为组件，更符合React的编程思想。而且，虽然不常见，你也可以将一些props或states与元数据绑定，实现动态头部。其中一个应用场景就是在不同语言之间切换。
React Helmet 还可以让你在渲染函数的范围之外修改类名。
例如，如果你想动态地修改你的 <body> 标签，你可以按照以下方式进行：
<Helmet>
<body className="dynamic-class-for-body-on-this-view" />
</Helmet>
React Helmet是一个可重复使用的React组件，它将管理所有对文档头部的更改。
例如，如果您想根据您的SEO要求更改每个页面的标题和元描述，您可以执行以下操作：
<Helmet>
<title>Your Title</title>
<meta name="description" content="Description of your page" />
</Helmet>
我专门使用Helmet来处理元标签，并更改第三方组件的样式，因为该组件无法编辑。
<Helmet>
<script type="text/javascript">
{`
window.addEventListener('load', function () {
document.querySelectorAll('.noEditStars > span').forEach(span => {
span.style.cursor = 'pointer';
});
}, false);
`}
</script>
</Helmet>
helmet更新<title>，但是您的用户实际上从未离开过第一页。 - Mike 'Pomax' Kamermans