Question

我已准备好完成我的第一个React项目，而且我的阅读非常清楚我需要让React处理虚拟DOM的所有渲染，并且我不应该做任何手册DOM操作会干扰虚拟DOM计算。

然而，我无法弄清楚的是：

假设我在一个带有其他HTML的页面中的div #app中呈现了一个React组件。这是否意味着我必须避免在页面的任何地方上进行任何普通的JavaScript DOM操作？或者我可以安全地在页面上的其他地方使用DOM操作，只要我将#app div和元素留在实际的React组件中吗？

编辑：激励用例

我考虑让非React组件在React组件之外操作DOM的原因主要是因为Google可以看到HTML而不会跳过很多箍。假设我想要一些关于应用程序的描述性文本对SEO有用，并且该描述可能有一些下拉切换等等（因此DOM问题）。我是否真的想要/需要在React中编写所有内容，因为应用程序本身的复杂UI使用了React，如果成本使得某些文本难以让Google进行索引？

Answer 1

假设您的html文件如下所示：

<body>
  <div id="app"></div>
  <div id="others"></div>
</body>

和React初始化如下：

ReactDOM.render(<Component/>, document.getElementById('app'));

您可以安全地修改div#others以及DOM的任何部分，但在div#app内，因为它是由React管理的。

Answer 2

我可能误解了您的问题，但React将是处理所有 DOM“操作”的理想人选。

您的React组件可以与使用普通JS DOM操作操作的元素位于同一页面上，但是您引入了冲突的范例。如果你曾经想过自己“我不能在React中做到这一点，但我知道如何使用jQuery”，你很可能会错过一些东西。

编辑：感谢您澄清用例。你绝对不需要在React中编写所有内容。正如其他人所说，我建议你将React拥有的DOM部分留给你的其他JS。 Fetch as Google看起来有助于在React中探索SEO。

我可以安全地在React应用程序中执行DOM操作，但在React组件之外吗？

2 个答案: