与浏览器控制台相比，为什么相同的jQuery选择器在React Component挂钩中具有不同的输出？

Question

我使用jQuery和ReactJS来完成一些事情。我注意到，当我在React中直接在浏览器控制台中执行此操作时，$(selector)的输出会有所不同。

由于这个原因，我直接在浏览器控制台中执行的某些javascript代码可以正常工作，但是当我在React中编写它时它不起作用。

例如我有这张表：

render(){
    console.log(this.state.data);
    return (
        <Table striped bordered condensed hover id="files-table">
            <thead>
                <tr>
                    <th>stuff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>stuff</td>
                </tr>
            </tbody>
        </Table>
    );
}

一方面，当我在React中console.log($('#files-table'))时，让我们在componentDidUpdate()钩子中说，我在控制台中看到了这个输出：

...另一方面，直接在浏览器控制台中输入的相同控制台语句显示此输出（这是我期望的那个）：

有人可以解释这些差异吗？

我在实现jQuery DataTable时遇到问题，因为将$('#files-table').DataTable()置于React componentDidUpdate()挂钩会产生错误： $（...）。DataTable不是函数< / strong>虽然它可以在浏览器中运行（我知道这个错误可能是由于加载jQuery两次等等引起的，但我不认为这就是这种情况）。

Answer 1

这种差异是由于 ReactJS使用虚拟DOM 以及当您在浏览器控制台中执行jQuery选择器时 - 您正在访问实际（真实）DOM。< / p>

为什么选择Virtual DOM？

ReactJS不是直接触摸真正的DOM，而是构建它的抽象版本（副本）。使用这种方法解决ReactJS的主要问题是DOM从未针对创建动态UI进行优化，并且写入浏览器的DOM相对较慢。

将Virtual DOM视为实际DOM的轻量级副本。与实际DOM一样，Virtual DOM是一个节点树，它将元素及其属性和内容列为对象和属性。 React的render（）方法从React组件创建一个节点树，并更新此树以响应由操作引起的数据模型中的突变。

  

有人会认为每次有可能发生变化时重新渲染整个虚拟DOM都会浪费 - 更不用说React在任何时候都会在内存中保留两个Virtual DOM树。但是，事实是渲染Virtual DOM总是比在实际浏览器DOM中渲染UI更快。无论你使用什么浏览器都没关系：这只是一个事实。

     

React通过将属性附加到文档中的元素并在执行diff之后单独操作它们（使用这些非常特定的ID属性）来确定需要更新的内容，从而实现了这一点。 Virtual DOM在流程中插入了额外的步骤，但它创建了一种优雅的方式来对浏览器窗口进行最小程度的更新，而不必担心使用的实际方法，甚至需要更新的内容以及何时更新。

有关您可以找到explained in this article以及ReactJS docs中的虚拟和实际DOM之间差异的详细信息。

如何在ReactJS中集成jQuery DataTable？

在您的情况下 - jQuery DataTabes库修改DOM。所以，你需要让React远离它。当React完全控制DOM时，React效果最佳。但在你的情况下 - 你需要将控件传递给jQuery。

您需要创建一个组件来管理jQuery DataTabes 。该组件将提供jQuery组件的以React为中心的视图。而且，它会：

• 使用React生命周期方法初始化和拆除插件;
• 使用React props作为插件配置选项并连接到插件的方法事件;
• 卸载组件时销毁该插件。

看看my answer here。它包含有关如何在ReactJS中集成jQuery库的完整详细信息和详细说明。您可以使用相同的方法。